Question

我无法弄清楚为什么我的4列放在一起比它们所在的容器宽。可以告诉我如何修复我的代码，以便列组完全适合其父容器吗？

感谢。

<div class="container">
  <div class="row">
    <div class="col-md-3">
      <a href="#" class="btn">Button</a>
    </div>
    <div class="col-md-3">
      <a href="#" class="btn">Button</a>
    </div>
    <div class="col-md-3">
      <a href="#" class="btn">Button</a>
    </div>
    <div class="col-md-3">
  <a href="#" class="btn">Button</a>
   </div>
  </div>
 </div>



body{
margin:0;
padding:0;
}

.container{
 padding:0;
 margin: 0 auto;
 border:solid 1px blue;
 width:100%;
 }
.col-md-3{
 border:solid 1px red;
 padding:0;
 margin:0 auto;
 }

.col-md-3 .btn{
display:block;
border: 1px solid green;

Answer 1

你是否正在为引导程序制作自己的CSS？

您可能想尝试获取主题并按照这种方式进行编辑 - 但我认为您可以通过在行中添加一些填充来获得所需内容。

试试这个css：

body{
margin:0;
padding:0;
}

.container{
 padding:0;
 margin: 0 auto;
 border:solid 1px blue;
 width:100%;
 }
.row {
padding:0.5%;
}
.col-md-3{
 border:solid 1px red;
 padding:0;
 margin:0 auto;
 }

.col-md-3 .btn{
display:block;
border: 1px solid green;

Answer 2

如果您只是想让页面全宽。试试这个。

这是默认的CSS。

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

以上默认值为@min-width：1200px

.container-fluid {
    border: solid 1px blue;
}
.col-md-3 {
    border: solid 1px red;
    padding: 0;
    margin: 0 auto;
}
.col-md-3 .btn {
    display: block;
    border: 1px solid green;
    width: 100%;
}

您可以使用container-fluid。

<div class="container-fluid">
    <div class="row">
        <div class="col-md-3"> <a href="#" class="btn">Button</a>

        </div>
        <div class="col-md-3"> <a href="#" class="btn">Button</a>

        </div>
        <div class="col-md-3"> <a href="#" class="btn">Button</a>

        </div>
        <div class="col-md-3"> <a href="#" class="btn">Button</a>

        </div>
    </div>
</div>

Bootstrap为什么我的列比容器更宽

2 个答案: