css - 布局未按计划工作

Question

我正在尝试为我们的公司目录设计一个漂亮的布局，我在左侧显示员工照片，并在彼此之上显示名称、描述和更多信息链接。

我正在使用 bootstrap 3。

我遇到的问题是更多信息链接显示在图像下方，而不是我想要的描述下方。

这是一个代码示例:

  <div class="row">
    <div class="col-md-6">

      <img src="images/1.jpg" alt="" style="margin-top:0; margin-right:15px;" class="pull-left">

      <div>
        <h4 style="font-weight: bold; font-size:1.5em;">Zara Alipat, Ph.D.</h4>
        <span>
           Zara was born in western Niger, where the few girls who are lucky enough to attend school are pulled out at the age of 12 to get married. Despite the odds, Zara fought to complete her education and enter the professional workforce. Now she holds a Master’s degree, manages Mercy Corps’ human resources in Niger and uses her position to mentor other young people. 
        </span> 
        <p>
          <a href="#">Read Full Bio</a>
        </p>
      </div>

    </div>

    <div class="col-md-6">

      <img src="images/1.jpg" alt="" style="margin-top:0; margin-right:15px;" class="pull-left">

      <div>
        <h4 style="font-weight: bold; font-size:1.5em;">Zara Alipat, Ph.D.</h4>
        <span>
           Zara was born in western Niger, where the few girls who are lucky enough to attend school are pulled out at the age of 12 to get married. Despite the odds, Zara fought to complete her education and enter the professional workforce. Now she holds a Master’s degree, manages Mercy Corps’ human resources in Niger and uses her position to mentor other young people. 
        </span> 
        <p>
          <a href="#">Read Full Bio</a>
        </p>
      </div>

    </div>


  </div>

非常感谢对此的任何建议或良好布局的示例。

Answer 1

<div class="col-md-6">
   <div class="row">
     <div class="col-sm-4">
      <img src="images/1.jpg" alt="" style="margin-top:0; margin-right:15px;" class="img-responsive">
     </div>
     <div class="col-sm-8">
        <h4 style="font-weight: bold; font-size:1.5em;">Zara Alipat, Ph.D.</h4>
        <span>
           Zara was born in western Niger, where the few girls who are lucky enough to attend school are pulled out at the age of 12 to get married. Despite the odds, Zara fought to complete her education and enter the professional workforce. Now she holds a Master’s degree, manages Mercy Corps’ human resources in Niger and uses her position to mentor other young people. 
        </span> 
        <p>
          <a href="#">Read Full Bio</a>
        </p>
    </div>
  </div>
</div>

尝试在图像周围的 div 上使用额外的 col 调用。这样你的元素就像专栏一样，你的内容将相互尊重。我添加了一个额外的行包装器来处理来自 div 上的 col 调用的填充。玩转内栏上的数字以满足您的需求。我还在 img 调用上设置了 img-responsive 以确保它不会溢出列。