如何填充整个Bootstrap行的内容

Question

如何填充整个Bootstrap行的内容

htmlcsstwitter-bootstraprowtwitter-bootstrap-2

3

我正在尝试弄清楚如何让Bootstrap行的整个宽度被3个子span4填满。看起来在最后一个span4之后仍有空间剩余。上次我检查过，3 x 4是12，那我错了哪里？

<body>
    <div class="container">
        <div class="row" style="background-color:#eee; border: 1px solid #888;">
            <input name="srcCity" type="text" class="span4" placeholder="City">
            <select name="srcState" class="span4" data-country="US" data-state="CA"> </select>
            <input  name="srcZip" type="text" class="span4" placeholder="Zip">
        </div>
    </div>
</body>

https://jsfiddle.net/ujq2vxqc/

- user1250991

我不明白，你的意思是你希望消除左右两侧的小间隙吗？ - Pouya Ataei

也许你看到的与我不同。我的界面是这样的：http://imgur.com/cCY3tbh 我希望内容能够填满整行，而当前似乎右侧有空白。 - user1250991

2个回答

0

正如Henry所说，您需要使用class="col-sm-4"。默认情况下，容器具有15px的填充，您需要在样式表中覆盖它。您屏幕的宽度取决于.col-xs-X .col-sm-X .col-md-X .col-lg-X，视口越宽，您想要使用的列就越大。

此外，在Bootstrap中，@media大小非常重要。因此，假设您有一个768px的视图，则Bootstrap中的容器设置为750px。如下所示。

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}
.container-fluid {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

原始的

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

让它变成这样：

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

.container {
  padding-right: 2px;
  padding-left: 2px;
  margin-right: auto;
  margin-left: auto;
}
.col-xs-1,
.col-sm-1,
.col-md-1,
.col-lg-1,
.col-xs-2,
.col-sm-2,
.col-md-2,
.col-lg-2,
.col-xs-3,
.col-sm-3,
.col-md-3,
.col-lg-3,
.col-xs-4,
.col-sm-4,
.col-md-4,
.col-lg-4,
.col-xs-5,
.col-sm-5,
.col-md-5,
.col-lg-5,
.col-xs-6,
.col-sm-6,
.col-md-6,
.col-lg-6,
.col-xs-7,
.col-sm-7,
.col-md-7,
.col-lg-7,
.col-xs-8,
.col-sm-8,
.col-md-8,
.col-lg-8,
.col-xs-9,
.col-sm-9,
.col-md-9,
.col-lg-9,
.col-xs-10,
.col-sm-10,
.col-md-10,
.col-lg-10,
.col-xs-11,
.col-sm-11,
.col-md-11,
.col-lg-11,
.col-xs-12,
.col-sm-12,
.col-md-12,
.col-lg-12 {
  position: relative;
  min-height: 1px;
  padding-right: 2px;
  padding-left: 2px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row" style="background-color:#eee; border: 1px solid #888;">

    <div class="col-xs-4">
      <input name="srcCity" type="text" class="form-control col-lg-4" placeholder="City">
    </div>
    <div class="col-xs-4">
      <select name="srcState" data-country="US" class="form-control col-lg-4" data-state="CA"></select>
    </div>
    <div class="col-xs-4">
      <input name="srcZip" type="text" class="form-control col-lg-4" placeholder="Zip">

    </div>
  </div>

小提琴

- pool pro

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Eezo · Accepted Answer

我认为你使用了错误的类，应该使用 span4（在bootstrap.css文件中不存在，据我所知），你可以使用 col-xx-4，其中xx可以是xs、sm、md、lg，取决于你的需求。像这样一些东西：

    <body>
    <div class="container">
        <div class="row" style="background-color:#eee; border: 1px solid #888;">
            <input name="srcCity" type="text" class="col-sm-4" placeholder="City">
            <select name="srcState" class="col-sm-4" data-country="US" data-state="CA"> </select>
            <input  name="srcZip" type="text" class="col-sm-4" placeholder="Zip">
        </div>
    </div>
</body>