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>

的main.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之间都有边距。最好在.col中使用自定义css放置第二个div。

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

Answer 2

margin: 3px .customDiv{}中的<div class="container" ng-app="myModule" ng-controller="myController"> <div class="row"> <div class="col-md-2"> <div class="col-md-12 customDiv">123</div> </div> <div class="col-md-8 "> <div class="col-md-12 customDiv">123</div> </div> <div class="col-md-2"> <div class="col-md-12 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>。你想要做的是将它嵌套在bootstrap列中，然后让它填充而不是边距。

uint16_t const* uart_reg = 0x8000c000;
uint16_t const* ram_addr = 0x4000c000;

*uart_reg = 0x1;
*ram_addr = 0x12;

bootply示例：https://www.bootply.com/CjZJkuC2Dq

Bootstrap网格系统不包含12列？

2 个答案: