Бутстрап Выравнивание изображения с текстом

Я пытаюсь выровнять изображение с левой стороны с текстом, используя boostrap, и когда страница просматривается на мобильных устройствах, изображения становятся центрированными поверх текста!

<div class="container">
<div class="row">
    <h1>About Me</h1>
    </class>
     <div class="col-md-4">
     <div class="imgAbt">
        <img  width="220" height="220" src="img/me.jpg">
     </div>
     </div>
    <div class="col-md-8"><p>Lots of text here...With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a .clearfix and o</p></div>
</div>
</div>

Я также пробовал .col-md-3 .col-md-pull-9 вместе с .col-md-9 .col-md-push-3, однако мне все еще не удалось достичь желаемых результатов похожих на этот проект

Ответ 1

Демо-скрипт

У вас есть два варианта: либо скорректировать свою разметку, чтобы использовать правильные элементы, и использовать сетку Bootstrap:

<div class="container">
     <h1>About Me</h1>
    <div class="row">
        <div class="col-md-4">
            <div class="imgAbt">
                <img width="220" height="220" src="img/me.jpg" />
            </div>
        </div>
        <div class="col-md-8">
            <p>Lots of text here...With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a .clearfix and o</p>
        </div>
    </div>
</div>

Или, если вы хотите, чтобы текст был плотно обернут изображение, измените разметку на:

<div class="container">
    <h1>About Me</h1>
    <div class="row">
        <div class="col-md-12">
            <img style='float:left;width:200px;height:200px; margin-right:10px;' src="img/me.jpg" />
            <p>Lots of text here...With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a .clearfix and o</p>
        </div>
    </div>

Ответ 2

используйте grid-system boostrap, более подробную информацию здесь

например

<div class="row">
  <div class="col-md-4">here img</div>
  <div class="col-md-4">here text</div>
</div>

таким образом, когда страница сжимает второй div (текст), будет найден под первым (изображение)

Ответ 3

Попробуйте использовать .pull-left-left выравнивание изображения вместе с текстом.

Пример:

<p>At the time all text elements goes here.At the time all text elements goes here. At the time all text elements goes here.<img src="images/hello-missing.jpg" class="pull-left img-responsive" style="padding:15px;" /> to uncovering the truth .</p>

Ответ 4

  <div class="container">
          <h1>About me</h1>
       <div class="row">
         <div class="pull-left ">
             <img src="http://lorempixel.com/200/200" class="col-lg-3" class="img-    responsive" alt="Responsive image">
                <p class="col-md-4">Lots of text here... </p> 
                </div>

          </div>
      </div>
   </div>

Ответ 5

Я думаю, что это полезно для вас.

<div class="container">
        <div class="page-header">
                <h1>About Me</h1>
            </div><!--END page-header-->
        <div class="row" id="features">
                <div class="col-sm-6 feature">
                        <img src="http://lorempixel.com/200/200" alt="Web Design" class="img-circle">
                </div><!--END feature-->

                <div class="col-sm-6 feature">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</p>
                </div><!--END feature-->
            </div><!--end features-->
    </div><!--end container-->

Ответ 6

Я новая пчела; И я столкнулся с той же проблемой. И решение - объекты BS Media. см. код..

<div class="media">
   <div class="media-left media-top">
    <img src="something.png" alt="@l!" class="media-object" width="20" height="50"/>
    </div>
   <div class="media-body">
      <h2 class="media-heading">Beside Image</h2>
   </div>
</div>

Ответ 7

<div class="container">
     <h1>About Me</h1>
    <div class="row">
        <div class="col-md-4">
            <div class="imgAbt">
                <img width="100%" height="100%" src="img/me.jpg" />
            </div>
        </div>
        <div class="col-md-8">
            <p>Lots of text here...With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a .clearfix and o</p>
        </div>
    </div>
</div>