Question

我在使引导网格正确显示时遇到问题。我的代码如下

<div class="container">
        <div class="row">
            <div class="col-md-6">.col-md-6</div>
            <div class="col-md-6">.col-md-6</div>
        </div>
 </div>

我所看到的只是： grid

任何人都知道这里发生了什么？我已正确包含所有bootstrap.css，bootstrap-theme.css和bootstrap.js。其他东西，如按钮，由引导程序正确格式化。

Answer 1

修改如下

<div class="container show-grid">
        <div class="row">
            <div class="col-md-6">.col-md-6</div>
            <div class="col-md-6">.col-md-6</div>
        </div>
 </div>

将以下css添加到样式表

.show-grid div{
  border:1px solid ;

}

Answer 2

据我所知，您的2 div被格式化为应有的格式？（使用Boostraps md-6）。

您.col-md-6不需要div值：

<div class="container">
        <div class="row">
            <div class="col-md-6">Your text here</div>
            <div class="col-md-6">Your text here</div>
        </div>
 </div>

有关更多信息，请查看Grid Templates

上的官方Bootstrap文档页面

对于文档中使用的网格视图（grid.css），添加以下CSS：

h4 {
  margin-top: 25px;
}
.row {
  margin-bottom: 20px;
}
.row .row {
  margin-top: 10px;
  margin-bottom: 0;
}
[class*="col-"] {
  padding-top: 15px;
  padding-bottom: 15px;
  background-color: #eee;
  background-color: rgba(86,61,124,.15);
  border: 1px solid #ddd;
  border: 1px solid rgba(86,61,124,.2);
}

hr {
  margin-top: 40px;
  margin-bottom: 40px;
}

Answer 3

Bootstrap使＆＃34;隐形＆＃34;网格如果你想这样看，如果你想让网格可见你可以用css添加背景颜色或边框，我最喜欢的是背景颜色：

的CSS：

.y0 { background-color: #CCC; }
.y1 { background-color: #9FF; }
.y2 { background-color: #F9F; }
.y3 { background-color: #F99; }
.y4 { background-color: #FF6; }
.y5 { background-color: #3C3; }

HTML：

<div class="container">
        <div class="row">
            <div class="col-md-6 y0">Your text here</div>
            <div class="col-md-6 y1">Your text here</div>
        </div>
 </div>

Bootstrap网格不显示

3 个答案: