twitter-bootstrap - Bootstrap 网格系统不包含 12 列？

Question

我正在尝试建立像 col-md-2 | 这样的行col-md-8 | col-md-2，它应该看起来像下面的截图。

但是我的其实是这样的。最后一列应该在同一行，对吗？

我不知道，因为我是 CSS 和 Bootstraps 的新手。我的代码有什么问题？

<div class="container" ng-app="myModule" ng-controller="myController">
    <div class="row">
        <div class="col-md-2 customDiv"></div>
        <div class="col-md-8 customDiv"></div>
        <div class="col-md-2 customDiv">
            <p class="bottom">
                Glory glory Man united, <br>
                Glory glory Man united, <br>
                Glory glory Man united, <br>
                As the reds go marching up up up!
            </p>
        </div>
    </div>

</div>

主.css

.customDiv{
    margin: 3px;
    min-height: 300px;
    background-color: silver;
    text-align: center;
    font-size: large;
    text-align: start;
}

样式标签

<style>
            body {
                padding-top: 50px;
                padding-bottom: 20px;
                background: url('img/login background.jpg');
                background-size: cover;
                background-repeat:no-repeat;
                display: compact;
            }


        </style>

Answer 1

问题出在类“.customDiv”上。看起来每个列之间都有边距。最好在 .col 中放置第二个 div，并使用您的自定义 CSS。

<div class="col-md-2">
    <div class="customDiv">
        <p>text here</p>
    </div>
</div>