防止div在引導程序中纏繞

Question

我使用引導程序來幫助構建網頁。在一行中，我有三個並排的div，寬度爲：12列布局中的2列，6列和4列。

中間div也有一個最小寬度設置，所以當最外面的div縮小超過一定的寬度時，沒有足夠的空間放置最右邊的div（4列），所以它會環繞並懸掛在下方其他divs。

我想阻止這個div纏繞，當屏幕縮小太小時，迫使它被窗口切斷。我怎麼做到這一點？

如有需要，我可以提供任何進一步的細節/代碼/圖片。

謝謝！

Before wrapping

After wrapping

Answer 1

爲了防止包裝：添加到您的行。

.row{ 
    width:100%; 
    margin:0; 
    padding:0; 
    display:flex; 
} 

width:100%;margin:0;padding:0;在此是可選的。

這可能會導致您的內容伸展到最大高度，因此請勿將內容直接放在引導列（例如，col-md-6等）中。把一個div放在它們裏面，然後把內容放在div裏面。

這樣的：

<div class="col-xs-2"> 
    <div class="contentDiv"> 
    <!--Put your content here--> 
    </div> 
</div> 

下面是一個例子：

#firstDiv,#secondDiv,#thirdDiv{ 
 
    height:100px; 
 
    background-color:red; 
 
    min-width:100px; 
 
} 
 
#firstDiv{ 
 
    background-color:green; 
 
} 
 
#secondDiv{ 
 
    background-color:blue; 
 
    min-width:500px; 
 
} 
 
.row{ 
 
    width:100%; 
 
    margin:0; 
 
    padding:0; 
 
    display:flex; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container-fluid"> 
 
    <div class="row"> 
 
    <div class="col-xs-2" id="firstDiv"> 
 
    </div> 
 
    <div class="col-xs-6" id="secondDiv"> 
 
    </div> 
 
    <div class="col-xs-4" id="thirdDiv"> 
 
    </div> 
 
    </div> 
 
</div>