Question

我正在使用bootstrap V 3。

在下面的代码中，我有一个“容器”，在1行内部有一些固定高度（当内容更多时需要垂直滚动）。

但最后一行总是让我看到容器外面。请建议可能的解决方案谢谢！

<div class="container-fluid" style="border:1px solid #cecece;">
                    <div class="row" style="height:40%;min-height:100px;">
                        --content--
                    </div>
                </div>

Answer 1

我假设你因为没有发布你的代码而浮动这些div。

如果您这样做，请尝试在:after或overflow: hidden上对父元素container-fluid进行明确修正。

.container-fluid {  overflow: hidden;  }

或

.container-fluid:after {
  content: "";
  display: table;
  visibility: hidden;
}

Answer 2

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div class="container-fluid" style="border:1px solid #cecece;">
                    <div class="row" style="height:40%;min-height:100px;">
                   <div class="col-xs-4 col-md-4 col-sm-4" style="border:1px solid red;background:#f7f7f7;text-align:center;">train</div> 
                      <div class="col-xs-4 col-md-4 col-sm-4" style="border:1px solid red;background:#f7f7f7;text-align:center;">train</div>
                       <div class="col-xs-4 col-md-4 col-sm-4" style="border:1px solid red;background:#f7f7f7;text-align:center;">train</div>
                    </div>
   <div class="row" style="height:40%;min-height:100px;">
                   <div class="col-xs-4 col-md-4 col-sm-4" style="border:1px solid red;background:#f7f7f7;text-align:center;">train</div> 
                      <div class="col-xs-4 col-md-4 col-sm-4" style="border:1px solid red;background:#f7f7f7;text-align:center;">train</div>
                       <div class="col-xs-4 col-md-4 col-sm-4" style="border:1px solid red;background:#f7f7f7;text-align:center;">train</div>
                    </div>
   <div class="row" style="height:40%;min-height:100px;">
                   <div class="col-xs-4 col-md-4 col-sm-4" style="border:1px solid red;background:#f7f7f7;text-align:center;">train</div> 
                      <div class="col-xs-4 col-md-4 col-sm-4" style="border:1px solid red;background:#f7f7f7;text-align:center;">train</div>
                       <div class="col-xs-4 col-md-4 col-sm-4" style="border:1px solid red;background:#f7f7f7;text-align:center;">train</div>
                    </div>
                </div>

＆＃13;

我希望你的回答在这里..

内容正在移动到“容器”之外，寻找可能的解决方案

2 个答案: