屏幕大小更改时引导中心元素对齐答案

【问题标题】：bootsrap center elements alignments when the screen size changes屏幕大小更改时引导中心元素对齐
【发布时间】：2014-12-17 10:33:19
【问题描述】：

我是引导程序的初学者，并尝试使用它构建网络应用程序。我想在浏览器的中心有两个文本框，只有较大的显示器必须有这些文本框。如果我对它们进行“向右拉”和“向左拉”，这会给我在中型到大型设备上的预期行为。但是对于小型设备，我希望它们位于 2 个分开的行上，并将它们放在窗口的中心。但是由于拉动，在较小的屏幕尺寸上对齐不会像我想要的那样发生。

这是我的代码：

<div class="container">
                <div class="row">
                    <div class="col-md-6">
                    <div class="pull-right">
                        <input type="text" value="1"/>
                    </div>
                    </div>

                    <div class="col-md-6">
                    <div class="pull-left">
                        <input type="text" value="1"/>
                    </div>
                    </div>
                </div>

            </div>

预计在较小的设备上：

  |                             |-------------|                         |                         
  |                             |   text box1 |                         |
  |                             |-------------|                         |
  |                             |-------------|                         |        
  |                             |   text box2 |                         |
  |                             |-------------|                         |

小型设备上的当前行为：

  |   |-------------|                                 |-------------|   |                         
  |   |   text box1 |                                 |  text box2  |   |
  |   |-------------|                                 |-------------|   |              |

【问题讨论】：

pull-right 和 pull-left 适用于所有视口宽度。您需要滚动自己的最小宽度 992px，例如在该断点的媒体查询中 pull-right-md {}。

标签： html twitter-bootstrap-3 responsive-design grid

【解决方案1】：

你可以试试下面的代码：

HTML：

<div class="container">
    <div class="row text-center">
        <div class="col-lg-2 col-md-2 col-sm-12 col-xs-12">
            <input type="text" value="1" />
        </div>
        <div class="col-lg-2 col-lg-push-8 col-md-2 col-md-push-8  col-sm-12 col-xs-12">
            <input type="text" value="1" />
        </div>
    </div>
</div>

概述：

我基本上删除了pull-left 和pull-right 类，以避免将来可能出现的任何问题。话虽如此，我添加了col-sm-12 和col-xs-12 来表示当设备是小/超小屏幕时，内容应该占据该行的所有12 列，将其他任何内容推送到下一行。

我还为您的文本框输入设置了适当的长度，但您可以随时根据需要进行调整 - 2 似乎是一个合理的数字。下面的示例将使您更好地了解您想要完成的工作。您可以移动右下角屏幕的屏幕尺寸，从大屏幕到超小屏幕进行调整。

Demo JSFiddle

【讨论】：

【解决方案2】：

您是否考虑过使用列偏移，而不是使用 pull-right 将其移动到中心？

例如，如果您使用col-md-offset-4

<div class="container">
  <div class="row form-inline">
    <div class="col-md-offset-4 col-md-2">
      <div>
        <input type="text" value="1"/>
      </div>
    </div>

    <div class="col-md-6">
      <div>
        <input type="text" value="1"/>
      </div>
    </div>
  </div>
</div>

【讨论】：