引导网格水平对齐元素答案

【问题标题】：bootstrap grid align elements horizontally引导网格水平对齐元素
【发布时间】：2014-04-01 08:49:31
【问题描述】：

我有一个关于 Bootstrap Grid 的快速问题。

如果我有以下代码：

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="row">
                <div class="col-md-2">
                    Some header here
                </div>
                <div class="col-md-8">
                    <input type="text" class="input-small" />
                    <input type="submit" value="ok" />
                </div>
            </div>
        </div>
    </div>        
</div>

如何将输入字段拉到更左侧，使其与我的“标题”文本有大约 5px 的边距？

我的带有文本的 div 显然有一个宽度，所以我不能只是将输入拉近文本。我可以将类更改为 col-md-1，但是我的文本将被强制分成两行。

我在这里设置了一个小提琴： http://jsfiddle.net/62kLr/ 您可能需要调整窗口大小才能正确查看对齐方式。

/BR 马丁

【问题讨论】：

标签： twitter-bootstrap grid alignment twitter-bootstrap-3

【解决方案1】：

尝试在您的网格中使用 col-sm-2 、 col-xs-2 功能。

<div class="container">
<div class="row">
    <div class="col-md-12 col-sm-12 col-xs-12">
        <div class="row">
            <div class="col-md-3 col-sm-3 col-xs-3">
                Some header here
            </div>
            <div class="col-md-9 col-sm-9 col-xs-9">
                <input type="text" class="input-small" />
      <input type="submit" value="ok" />
            </div>
        </div>
    </div>
  </div>        
</div>

【讨论】：

col-md 适用于中型屏幕，col-xs 适用于小屏幕设备。给定的代码是工作代码。

【解决方案2】：

您可以使用label 而不是单独的列...

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="row">
                <div class="col-md-10">
                    <label>Some header here</label>
                    <input type="text" class="input-small">
                    <input type="submit" value="ok">
                </div>
            </div>
        </div>
    </div>        
</div>

http://www.bootply.com/117582

【讨论】：

当然！非常感谢您的提示 :) 有时您只需要其他人关注这个问题。