Question

我正在尝试在引导网格系统中对齐一列，以便将col中的所有内容推到右侧。我已经尝试了帮助类拉 - 右但它没有做任何事情。我希望能够将我的任何列中的元素移动到左侧或中心，但我认为我错过了一些东西。

<div class="col-xs-4 pull-right">
            <div class="form-group">
                <label for="field-1" class="col-sm-1 control-label">Filter:</label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control" id="field-1" placeholder="Enter info">
                    </div>
            </div>
        </div>

我想要做的就是将右栏中的内容移动到右对齐http://i.imgur.com/2csx7az.jpg

我尝试创建一个名为col-right的css规则，右边是text-align但是没有做任何事情。

Answer 1

也许这就是你要找的东西？

<div class="row">
    <div class="col-xs-4 pull-right">
        <div class="form-group">
            <label for="field-1" class="col-sm-1 control-label">Filter:</label>
            <div class="col-sm-6">
                <input type="text" class="form-control" id="field-1" placeholder="Enter info">
            </div>
        </div>
    </div>
    <div class="col-xs-4">
        <div class="form-group">
            <label for="field-2" class="col-sm-1 control-label">Filter 2:</label>
            <div class="col-sm-6">
                <input type="text" class="form-control" id="field-2" placeholder="Enter info2">
            </div>
        </div>
    </div>
</div>

Here is a jsFiddle正在工作。

Answer 2

我认为您希望使用Bootstrap网格列来实现您的需求，然后text-right来对齐列内容......

<div class="col-xs-4">
  <div class="form-group">
    <label for="field-1" class="col-sm-6 text-right control-label">Filter:</label>
    <div class="col-sm-6">
      <input type="text" class="form-control" id="field-1" placeholder="Enter info">
    </div>
  </div>
</div>

http://www.bootply.com/wKNm4JQqhV

Bootstrap网格对齐

2 个答案: