コンテンツがBootstrapと正しく整列する

Question

私はあなたの車がいつサービスを必要とするかを示すLEDボックスを備えたプロジェクトに取り組んでいます。私は現在、 "製品"へのウェブサイトを作成していますが、私はコンテンツをブートストラップの列を使用してプローバに整列させることに問題があります。

http://imgur.com/a/jYEgp

私は私がウィンドウのサイズを変更する場合も

私のコードは、この

<div class="info-1000"> 
 
    <div class="container"> 
 
     <div class="row"> 
 
      <div class="col-sm-8"> 
 
       <h3 style="padding-top:20px">Lorum Ipsum</h3> 
 
       <p class="info-tekst">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris faucibus ipsum neque, sed interdum nisi congue nec. Etiam rutrum est eget nisi tincidunt feugiat. Phasellus eget dolor consectetur, scelerisque eros id, aliquet dui. Pellentesque pulvinar urna sem, ac ultrices mauris interdum ut. Etiam placerat sapien vel mi vulputate cursus. Sed rhoncus nunc non risus auctor tincidunt. Nullam ornare odio sed augue fringilla porta. Fusce maximus neque vitae augue vulputate, at convallis tortor lobortis. Suspendisse velit nibh, auctor suscipit sodales aliquam, consequat nec tellus. Quisque odio velit, posuere eu nisi eu, tempus consectetur ipsum. Proin sollicitudin sagittis ultricies. Donec in nunc.</p> 
 
      </div> 
 
      <div class="col-sm-4"> 
 
       <img class="modul" src="img/modul-1.png"> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div> 
 
    
 
<div class="info-500"> 
 
    <div class="container"> 
 
     <div class="row"> 
 
      <div class="col-sm-4"> 
 
       <img class="modul" src="img/modul-2.png"> 
 
      </div> 
 
      
 
      <div class="col-sm-8"> 
 
        <h3 style="padding-top:20px;" class="info-tekst-2"> Lorum Ipsum</h3> 
 
        <p class="info-tekst-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris faucibus ipsum neque, sed interdum nisi congue nec. Etiam rutrum est eget nisi tincidunt feugiat. Phasellus eget dolor consectetur, scelerisque eros id, aliquet dui. Pellentesque pulvinar urna sem, ac ultrices mauris interdum ut. Etiam placerat sapien vel mi vulputate cursus. Sed rhoncus nunc non risus auctor tincidunt. Nullam ornare odio sed augue fringilla porta. Fusce maximus neque vitae augue vulputate, at convallis tortor lobortis. Suspendisse velit nibh, auctor suscipit sodales aliquam, consequat nec tellus. Quisque odio velit, posuere eu nisi eu, tempus consectetur ipsum. Proin sollicitudin sagittis ultricies. Donec in nunc.</p> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

のように見ている、最初のセクションのようにalingedされる第2のセクションのコンテンツを希望

希望します。

Answer 1

問題は、以下のコードを参照してくださいimgしなさいにimg-responsiveクラスを追加することです：

<div class="info-1000"> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-sm-8"> 
       <h3 style="padding-top:20px">Lorum Ipsum</h3> 
       <p class="info-tekst">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris faucibus ipsum neque, sed interdum nisi congue nec. Etiam rutrum est eget nisi tincidunt feugiat. Phasellus eget dolor consectetur, scelerisque eros id, aliquet dui. Pellentesque pulvinar urna sem, ac ultrices mauris interdum ut. Etiam placerat sapien vel mi vulputate cursus. Sed rhoncus nunc non risus auctor tincidunt. Nullam ornare odio sed augue fringilla porta. Fusce maximus neque vitae augue vulputate, at convallis tortor lobortis. Suspendisse velit nibh, auctor suscipit sodales aliquam, consequat nec tellus. Quisque odio velit, posuere eu nisi eu, tempus consectetur ipsum. Proin sollicitudin sagittis ultricies. Donec in nunc.</p> 
      </div> 
      <div class="col-sm-4"> 
       <img class="modul img-responsive" src="img/modul-1.png"> 
      </div> 
     </div> 
    </div> 
</div> 

<div class="info-500"> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-sm-4"> 
       <img class="modul img-responsive" src="img/modul-2.png"> 
      </div> 

      <div class="col-sm-8"> 
        <h3 style="padding-top:20px;" class="info-tekst-2"> Lorum Ipsum</h3> 
        <p class="info-tekst-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris faucibus ipsum neque, sed interdum nisi congue nec. Etiam rutrum est eget nisi tincidunt feugiat. Phasellus eget dolor consectetur, scelerisque eros id, aliquet dui. Pellentesque pulvinar urna sem, ac ultrices mauris interdum ut. Etiam placerat sapien vel mi vulputate cursus. Sed rhoncus nunc non risus auctor tincidunt. Nullam ornare odio sed augue fringilla porta. Fusce maximus neque vitae augue vulputate, at convallis tortor lobortis. Suspendisse velit nibh, auctor suscipit sodales aliquam, consequat nec tellus. Quisque odio velit, posuere eu nisi eu, tempus consectetur ipsum. Proin sollicitudin sagittis ultricies. Donec in nunc.</p> 
      </div> 
     </div> 
    </div> 
</div>