3

我正在使用 Bootstrap 3，主要针对移动网站进行编码。当我不希望内容占据整条线时，我无法将内容居中。当屏幕大于某个宽度时，它不会居中，而当它小于该宽度时（尤其是我们正在优化的尺寸），它甚至不会离开左边框页。此外，当某些元素达到一定大小时，它们的大小会不断跳跃。我认为最后一个是正常行为，但我一生都无法弄清楚原因。

HTML：

<div class="col-xs-12">
    <div class="container">
        <div class="form-group col-xs-11">
            <div class="col-xs-5 pull-left">
                <input type="text" class='form-control' id="firstName" name="firstName" placeholder="First Name" required />
            </div>
            <div class="col-xs-5 pull-right">
                <input type="text" class='form-control' id="lastName" name="lastName" placeholder="Last Name" required />
            </div>
        </div>
    </div>
    <div class="form-group">
        <input type="email" class='form-control' id="email" name="email" placeholder="Email" required />
    </div>
</div>

bootstrap-custom.css 中的@media 是：

@media (min-width 1200)
    .container {
        max-width: 1140px;
    }
@media (min-width 992)
    .container {
        max-width: 940px;
    }
@media (min-width 768)
    .container {
        max-width: 720px;
    }
.container {
    margin-right: auto;
    margin-left: auto;
    padding-left: 0;
    padding-right: 0;
}

我不确定这是否是引用它们的正确/可接受的方式。

我也有其余的 bootstrap-custom.css，如果你需要它来回答你的问题。

PS我没有第一行（名字和姓氏）占据整行的全部原因是因为我不希望它。我希望那一排在中间，两边都有空间。

PPS 这是一个小提琴。

4

3 回答 3

0

免责声明：我之前没有做过任何 Bootstrap - 我只是在黑暗中刺伤。

对于简单的两列布局，创建一个.row并添加适当数量的.span*列。由于这是一个 12 列的网格，每个网格.span*跨越这 12 列中的许多列，并且每行（或父项中的列数）应始终加起来为 12。

因此，我将您的col-xs-5元素更改为，col-xs-6以便它们加起来为 12，因此一起占用 100% 的行宽。我将您的电子邮件输入字段移动到.container并添加了col-xs-11该类，以使其反映其他form-group人的左右边距。我将您的电子邮件输入字段包装在一个div（就像您对其他字段所做的那样），并添加了col-xs-12该类以使其拉伸到其父行宽度的 100%。

这是一个小提琴。

此外，当某些元素达到一定大小时，它们的大小会不断跳跃。我认为最后一个是正常行为，但我一生都无法弄清楚原因。

这是一个更新的小提琴，它使用CSS3 过渡来缓解你不同max-width的 s.

于 2013-10-08T05:16:37.293 回答
0

您是否尝试过 text-align:center; 到你的容器类？

于 2013-10-08T05:38:36.340 回答
0

我认为你需要稍微改变你的标记。将所有内容包裹在 a 中container，并将您的form-group作为行..

例如：

<div class="container">
  <div class="col-xs-12">
      <div class="row form-group">
        <div class="col-xs-6">
          <input type="text" class="form-control" id="firstName" name="firstName" placeholder="First Name" required="">
        </div>
        <div class="col-xs-6 pull-right">
          <input type="text" class="form-control" id="lastName" name="lastName" placeholder="Last Name" required="">
        </div>
      </div>
      <div class="row form-group">
          <div class="col-xs-12">
          <input type="email" class="form-control" id="email" name="email" placeholder="Email" required="">
          </div>
      </div>
  </div>
</div>

工作演示：http ://bootply.com/86294

PS - 看看演示中的选项 #2，这样您的输入就不会太小。这将允许它们在最小的屏幕上垂直堆叠。

于 2013-10-08T12:36:04.007 回答