HTML 内容不在窄屏幕上居中

Question

我正在使用 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 的其余部分，如果您需要它作为答案。

附言我没有让第一行(firstName 和 lastName)占据整行的全部原因是因为我不希望它。我希望该行位于中间，两边都有空间。

附言这是一个fiddle .

Answer 1

免责声明:我之前没有做过任何 Bootstrap - 我只是在黑暗中摸索。

For a simple two column layout, create a .row and add the appropriate number of .span* columns. As this is a 12-column grid, each .span* spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent).

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

<罢工> Here是一把 fiddle 。

Also, some elements keep jumping in size when they get to be a certain size. I assume that last one is normal behavior, but can't for the life of me figure out why.

Here是一个更新的 fiddle ，它使用了CSS3 transitions在不同的 max-width 之间缓和。