Question

我正在使用bootstrap来帮助构建网页。在一行中，我有三个并排的div，宽度为：12列，6列，以及12列布局中的4列。

中间div也有一个最小宽度设置，所以当最外面的div缩小超过一定宽度时，没有足够的空间容纳最右边的div（4列一个），所以它环绕并悬挂在其他div。

我想防止这个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>

以下是一个例子：

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

防止div在bootstrap中缠绕

1 个答案: