ブートストラップ4：私は最初の2つだけULの「表示することができ、次のHTMLを<a href="https://i.stack.imgur.com/ONfON.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ONfON.png" alt="enter image description here"></a></p> <p>：モバイル

Question

私は次のようなレイアウトをオンにしようとしている、この応答モバイルへ（デスクトップ）

内の列の順序アイコン内のdivやニュースレターのdivは表示されません。私は問題が2番目のulの底にあるLORAE IPSUMのキャップで始まると思うが、それを修正する方法はわからない。私はいくつかの解決策を試しましたが、私はちょっと混乱しました...誰かがこれを成果を上げるのを助けることができますか？私はブートストラップを使って新しくて、ありがとう。コード：

<div class="row"> 
      <div class="col-6 col-md-2"> 
       <h6>LORA IPSUM</h6> 
       <ul > 

        <li>Lorae Ipsum</li> 
        <li>Lorae Ipsum</li> 
        <li>Lorae Ipsum</li> 


       </ul> 

      </div> 
      <div class="col-6 col-md-2"> 
       <h6>LORAE IPSUM</h6> 
       <ul > 

        <li>Lorae Ipsum</li> 
        <li>Lorae Ipsum</li> 
        <li>Lorae Ipsum</li> 
        <li style="height:30px;"></li>    
        </ul> 


       <h6>LORAE IPSUM</h6> 
       <h6>LORAE IPSUM</h6> 
      </div> 
      <div class="col-6 col-md-2 "> 

        <h6>LORAE IPSUM</h6> 
        <h6>LORAE IPSUM</h6> 
        <h6>LORAE IPSUM</h6> 
        <h6>LORAE IPSUM</h6> 



      </div> 
      <div class="col-6 col-md-6 "> 

       <div class="row"> 
        <div class="col-6 col-md-6 "> 
         <h6>LORAE IPSUM</h6> 
         <a> 
         <img class="img-fluid" 
src="http://via.placeholder.com/40x40"> 
         </a> 
         <a> 
         <img class="img-fluid" src="http://via.placeholder.com/40x40"> 
         </a> 
         <a> 
         <img class="img-fluid" src="http://via.placeholder.com/40x40"> 
         </a> 
         <a> 
          <img class="img-fluid" src="http://via.placeholder.com/40x40"> 
         </a> 
         <a> 
         <img class="img-fluid" src="http://via.placeholder.com/40x40"> 
         </a> 

        </div> 

        <div class="col-6 col-md-6 "> 
         <h6>NEWSLETTER</h6> 
          <div class="row"> 
           <div class="col-12"> 
            <button>Subscribe</button> 
           </div> 
          </div> 
         <div class="row" style="height:50px;">        
          </div> 
         <div class="row "> 
           <div class="col-12 part"> 
             <a> 
            <img class="img-fluid" src="http://via.placeholder.com/100x30"> 
            </a> 
           </div> 
          </div> 
         <div class="row "> 
           <div class="col-12 part"> 
            <a> 
            <img class="img-fluid" src="http://via.placeholder.com/100x30"> 
            </a> 
           </div> 
          </div> 
        </div> 


       </div> 



      </div> 
     </div> 

Answer 1

は、私が何を求めていることであると考えている「細胞間のInDesignに似たブートストラップグリッド内からの流れの上に文字列への道がありますか？」

私はこのようなことに遭遇したことはありません。ブートストラップは、グリッド内のセルを移動します。セル内のコンテンツを気にする必要はありません。 text-overflowが私が考えた最初のものでしたが、これはおそらくあなたが探しているものとは正反対です。