ブートストラップ - テキスト区切り後の次の行に区切りを設定する

Question

私にはこれに対する迅速な解決策があると感じていますが、私は困惑しています。

私は単純なレイアウト、2 col画像、4 colテキスト、2 col画像、4 colテキストを持っています。

<div class="container"> 
<div class="row"> 
    <div class="col-sm-6 col-md-2"><img src="https://dummyimage.com/300x300/000/fff"></div> 
    <div class="col-sm-6 col-md-4">Nulla porttitor accumsan tincidunt. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Nulla quis lorem ut libero malesuada feugiat. Curabitur aliquet quam id dui posuere blandit. Donec sollicitudin molestie malesuada. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div> 
    <div class="col-sm-6 col-md-2"><img src="https://dummyimage.com/300x300/000/fff"></div> 
    <div class="col-sm-6 col-md-4">Nulla porttitor accumsan tincidunt. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Nulla quis lorem ut libero malesuada feugiat. Curabitur aliquet quam id dui posuere blandit. Donec sollicitudin molestie malesuada. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div> 
    </div> 
</div> 

SMのブレークポイントで、私は6 COLそれぞれに切り替えたい

https://codepen.io/brianpensinger/pen/GEbxxv

。しかし、私の2番目のイメージは新しい行に行くのではなくテキストの下に座っています。

Screenshot

どのように私は次の行にそれを強制することができますか？それが原因cleafix問題のだ

おかげで、 ブライアン

Answer 1

はcolsに起因するfloat:leftに発生します。特定のSMビューポートのCSSを書いて手動で行うことも、clearfixのHTMLを単に追加することもできます。これはSMビューポートでのみ機能します。

スニペットを確認します。そこ

img { 
 
    width: 100%; 
 
    height: auto; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-sm-6 col-md-2"><img src="https://dummyimage.com/300x300/000/fff"></div> 
 
    <div class="col-sm-6 col-md-4">Nulla porttitor accumsan tincidunt. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. 
 
     Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Nulla quis lorem ut libero malesuada feugiat. Curabitur aliquet quam id dui posuere blandit. Donec sollicitudin molestie malesuada. Curabitur non nulla sit amet nisl tempus convallis 
 
     quis ac lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div> 
 

 
    <!-- ############## Added Clearfix for SM view ############# --> 
 
    <div class="clearfix visible-sm"></div> 
 

 

 
    <div class="col-sm-6 col-md-2"><img src="https://dummyimage.com/300x300/000/fff"></div> 
 
    <div class="col-sm-6 col-md-4">Nulla porttitor accumsan tincidunt. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. 
 
     Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Nulla quis lorem ut libero malesuada feugiat. Curabitur aliquet quam id dui posuere blandit. Donec sollicitudin molestie malesuada. Curabitur non nulla sit amet nisl tempus convallis 
 
     quis ac lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div> 
 
    </div> 
 
</div>

Answer 2

こんにちは！

<div class="row"> 
    <div class="col-md-6"> 
     <div class="row"> 
      <div class="col-sm-6 col-md-4"><img src="https://dummyimage.com/300x300/000/fff"></div> 
      <div class="col-sm-6 col-md-8">Text here</div> 
     </div> 
    </div> 
    <div class="col-md-6"> 
     <div class="row"> 
      <div class="col-sm-6 col-md-4"><img src="https://dummyimage.com/300x300/000/fff"></div> 
      <div class="col-sm-6 col-md-8">Text here</div> 
     </div> 
    </div> 
    </div> 

これは、必要な処理を行います:)最初の行を定義することによって、1つのブロックであると言いました。内側の列を定義することにより、ページの50％をmd/lgで占めるように指示しました。その後、自動的に全幅になり、最終的に問題が発生しています。

もう1つの行を定義することができます。別の行を定義することで、ブートストラップにコンテナの幅の100％を占めるように指示しました。上記の列は、もはや有効なmdサイズではなく、100％を超えて完全に統治しています。これはあなたに6/6を、もう1つ下に与えます。