Question

我正在尝试为我们的公司目录整理一个漂亮的布局，我在左边显示员工图片，并且将名称，描述和MoreInfo链接堆叠在一起。

我正在使用bootstrap 3。

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

这是一个代码示例：

  <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中，将名称和moreinfo放在另一个div中使图像不浮动

chat.go

Answer 2

<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，以确保它不会在列上流失。

布局无法按计划运行

2 个答案: