引导程序中心元素对齐时，屏幕大小的变化

Question

我是一个初学者，试图用它来构建一个web应用程序。我想有两个文本框在浏览器的中心，只有较大的显示必须有这些文本框在行。如果我对它们进行"右拉"one_answers"左拉"操作，它就会给出我在中型到大型设备上的预期行为。但是对于小型设备，我希望它们在两个分开的行上，并将它们放在窗口的中心。但由于拉拽，在较小的屏幕尺寸上对齐不会像我想的那样发生。

这是我的代码:

<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  |   |
  |   |-------------|                                 |-------------|   |              |

Answer 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似乎是一个公平的数字。下面的例子会给你一个更好的感觉，你想要完成什么。你可以移动右下方屏幕的屏幕大小来调整它从大屏幕到特小屏幕。

演示JSFiddle

Answer 2

不是使用右拉将其移动到中心，你考虑过使用列偏移吗?

例如，如果您使用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>