Question

我使用的是Bootstrap 3，主要用于移动网站。当我不希望它占用整行时，我无法集中内容。当屏幕大于某个宽度时，它不会居中，＆amp;当它小于那个宽度时（特别是我们正在优化它的大小），它甚至不会离开页面的左边界。此外，一些元素在达到一定大小时会继续跳跃。我假设最后一个是正常行为，但不能为我的生活找出原因。

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的其余部分，如果您需要答案。

P.S。我没有第一行（firstName＆amp; lastName）占据整行的全部原因是因为我不想要它。我希望那一排在中间，两边都有空格。

P.P.S。这是fiddle。

Answer 1

免责声明：我之前没有做任何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％。

~~Here是一个小提琴。~~

此外，一些元素在确定时会继续跳跃尺寸。我假设最后一个是正常行为，但不能为了我的生活找出原因。

Here是一个更新的小提琴，它使用CSS3 transitions来缓解不同的max-width。

Answer 2

你试过text-align：center;你的容器类？

Answer 3

我认为你需要稍微改变你的标记。将所有内容包裹在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

P.S。 - 看看demo中的选项＃2，这样您的输入就不会太小。这将允许它们在最小的屏幕上垂直堆叠。

HTML内容不以窄屏为中心

3 个答案: