Планировка не работает, как планировалось

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 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> 

Попробуйте использовать дополнительный вызов Col на DIV вокруг изображения. Таким образом, ваши элементы действуют как столбцы, и ваш контент будет уважать друг друга. Я добавил дополнительную оболочку строки, чтобы позаботиться о дополнении, которое приходит от вызова col на div. Играйте с номерами на внутренних колонках, чтобы они соответствовали вашим потребностям. Я также поставил img-отзыв на вызов img, чтобы убедиться, что он не истекает кровью по столбцу.

Answer 2

попытайтесь поместить изображение в одном DIV и имя и MOREINFO в другом сделать изображение DIV нон плавающую

style="float:none;"