防止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>