HTML 内容不在窄屏幕上居中

Posted 2023-03-05

【中文标题】HTML 内容不在窄屏幕上居中

【英文标题】：HTML Content Not Centering on Narrow Screens

【发布时间】：2013-10-14 21:07:18

【问题描述】：

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

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

附言这是fiddle。

【问题讨论】：

放个小提琴会更容易理解

【参考方案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-widths。

【讨论】：

我不希望他们占据他们父母的整个行。这就是为什么我没有加到 12。我知道这还没有完成，但是除了使用 visibility: hidden 添加额外的空元素或使用百分比执行 CSS 的 width 之外，我没有看到其他方法，这就是 Bootstrap 的 @987654338 @'s 无论如何。反正我之前试过了，也没用。

试试 like this。必要时调整填充和列大小。避免多余元素虽然很好，但没有想到一种方法可以让您在没有包装器元素的情况下根据需要使用 float (pull)... 除非您想添加显式 padding s 将它们定位到距左/右所需的距离。

我想你的意思是margins，我试过了。 Padding 在元素外部和实际元素之间增加了更多空间，而margin 在元素之间增加了更多空间。我知道，这很令人困惑。

我的意思是 padding - Bootstrap 正在使用它来添加间距，从而将它们 远离 从中心推开，这是您不想要的。无论如何，使用margin/padding 的哪个方面不符合您的标准？这就是所谓的“有用”信息。我知道，这很令人困惑。

对不起，我找不到一种方法来表达这句话，而不会令人气愤地光顾。发生的事情是，每当我使用margin: auto 时，该网站在更大的屏幕上看起来不错（不是完全居中，但无论如何），但在小屏幕上浮动到左侧，这不是我们想要的。我可能不得不尝试使用百分比的margin（或padding）。

【参考方案2】：

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

【讨论】：

尝试添加margin-left:auto;和边距右：自动；到您的内容类，以便所有元素水平居中对齐。

这就是 Bootstrap 类 container 所做的。我自己也试过了，还是不行。

【参考方案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

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

【讨论】：

您是如何将输入分开但仍让它们加起来为 12 的？

我不确定你所说的分开是什么意思。你能详细说明吗？你是指名字和姓氏吗？

是的。你是如何让他们彼此远离的？每当我在我的代码中这样做时，它们就会彼此相邻。

你用的是最新的3.0吗？他们应该像演示一样工作。

是的，否则我无法使用col-xs-*。即使我将它直接粘贴到我的代码中，lastName 和 firstName 仍然会彼此相邻。你认为 jQuery 版本可能与它有关？