2列の画像を持つブートストラップnavbar

Question

助けてください。

|   | Menu item1 | Menu item2  
| Image |____________________________________________________________ 
|   | Some static text 
__________________________________________________________________________ 

ブートストラップナビゲーションバーのクラスで： 私は同じ構成を作成する必要があります。 イメージを2つの行に分割する方法を理解できません。

Answer 1

あなたは、いくつかのFlexboxでこれを行うことができ、メディアは、私はあなたがやろうとしているかを理解する場合は、あなたが最初の列に3つの列の項目を持つ2つの行をしたいDEMO

@media(min-width: 768px) { 
    .two-rows-nav { 
    display: flex; 
    flex-direction: column; 
    } 
} 

Answer 2

を問い合わせます最初の行は両方の行に収まります。これを行う最善の方法は入れ子にすることです。たとえば、2つの列（col-md-3とcol-md-9）を持つ行があるとします。最初の列（col-md-3）には、イメージがあります。 2番目の列（col-md-9）には、静的なテキストが下にある行があります。イラスト：

---

Image  | First | nested | row 
(col-md-3)| --------------------- 
      | Text 
      | --------------------- 

コード例：

<div class="row"> 
    <!-- The first column where the image will be --> 
    <div class="col-md-3"> 
    <img src="your-img.jpg" alt="img"> 
    </div> 

    <!-- The second column where the row and content will be nested --> 

    <div class="col-md-9"> 

    <!-- Nested row --> 
    <div class="row"> 

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

    </div> 

    <!-- Content --> 
    This is where your text would go. 
    </div> 
</div> 

いくつかの詳細情報：http://getbootstrap.com/css/#grid-nesting