帶兩排圖像的自舉導航欄

-1

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

帶有自舉導航欄類。我無法理解如何在沒有鬆散功能的情況下將圖像分割成兩行。

來源

2016-05-14 awzster

您是否嘗試過做呢？任何代碼？ –

請提供迄今爲止您已嘗試的相關代碼。 –

你可以用一些Flexbox和媒體爲此詢問DEMO

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

來源

2016-05-14 18:42:03

如果我明白你正在嘗試做的，你要兩行三列其中的第一列中的項第一行適合兩行。最好的辦法是嵌套。舉一個例子，假設你有一行有兩列（col-md-3和col-md-9）。在第一欄（col-md-3）中，您將會看到一幅圖像。在第二列（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

來源

2016-05-14 19:11:04 dashd90e8

帶兩排圖像的自舉導航欄

回答

相關問題