html - 防止 div 在 Bootstrap 中环绕

Question

<分区>

Answer 1

为了防止换行:将其添加到您的行中。

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

width:100%;margin:0;padding:0;在此可选。

这可能会导致您的内容拉伸(stretch)到全高，因此不要将内容直接放在 Bootstrap 列(例如 `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>