Question

我正在尝试学习bootstrap，并且我已经复制了另一个项目中的容器，行和列，但它们没有正确浮动。我的css是：

html {
  font-family: sans-serif;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}  

body {
  margin: 0;
}

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

.row {
  margin-right: -15px;
  margin-left: -15px;
}

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 { 
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    float: left; 
    }

.col-1 { width: 8.33333333%; }
.col-2 { width: 16.66666667%; }
.col-3 { width: 25%; }
.col-4 { width: 33.33333333%; }
.col-5 { width: 41.66666667%; }
.col-6 { width: 50%; }
.col-7 { width: 58.33333333%; }
.col-8 { width: 66.66666667%; }
.col-9 { width: 75%; }
.col-10 { width: 83.33333333%; }
.col-11 { width: 91.66666667%; }
.col-12 { width: 100%; }

.text-center {
  text-align: center;
}

.row:after {
    clear: both;
}
@media (min-width: 768px) {
  .container { width: 750px; }
}

@media (min-width: 992px) {
  .container { width: 970px; }
}

@media (min-width: 1200px) {
  .container { width: 1170px; }
}

和html是：

<body>
<header>

</header>
<div class="container">
    <div class="row">
        <div class="col-12"></div><h1 class="text-center">Test<span><a href="#" title="Contact Jeremy">Test</a></span><span>Test</span>         <span>test</span></h1>
    </div>
    <div class="row">
        <div class="col-3">Profile</div><div class="col-9"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p></div>
    </div>
</div>
</body>
</html>

但是当我尝试使用它时，一列会叠加。如果我稍微改变百分比，那么它们不会加起来达到100％就可以了。但它似乎在bootstrap中运行良好。谁能看到我错过的东西？

Answer 1

这是因为填充，它在列周围增加了额外的空间。与width: 100%结合使用会导致列堆叠。

基于列的布局通常在列之间有一个排水沟，然后使用calc()从每列的总宽度％中减去装订线。

所以你的每边都有一个15px排水沟= calc(80% - 30px)会在80％的栏目上给你宽度。

Alex

The Subtle Magic Behind Why The Bootstrap 3 Grid Works

mfp

最多100％的列是堆叠的，而不是浮动的

1 个答案: