Question

我使用bootstrap 3来绘制一个有3个区域的井：左区域，中心区域和右区域。在每个区域，我将绘制文本，输入数据和使用一些gryphicons。

我无法在井内垂直或水平对齐。这是我的示例代码。

<div class="well">
    <small class="pull-left">LeftText</small>
    <small>CenterText</small>
    <small class="pull-right">RightText</small>
</div>

在此检查jsfiddle：JsFiddle Example

如何修复它并使其与正确的对象一起使用？

感谢您提供任何帮助。

Answer 1

你可以这样做。

<div class="well">
        <div class="col-xs-4">
            <p class="text-left">LeftText</p>
        </div>

        <div class="col-xs-4">
            <p class="text-center">CenterText</p >
        </div>

        <div class="col-xs-4">
            <p  class="text-right">RightText</p >
        </div>
    </div>

我已相应地更新了小提琴。

Answer 2

你没有使用bootstrap列的任何特定原因？

我会尝试：

  <div class="well">
    <small class="col-xs-4">LeftText</small>
    <small class="col-xs-4">CenterText</small>
    <small class="col-xs-4">RightText</small>
  </div>

在你的CSS中：

.well {
    text-align: center
}

http://jsfiddle.net/k5yur/

Answer 3

@import url('http://getbootstrap.com/dist/css/bootstrap.css');

.well {
    overflow: hidden;
}

.well div {
    float: left;
    width: 33.33333333%;
}

.well-center {
    text-align: center;   
}

.well-right {
    text-align: right;   
}

<div class="well">
    <div class="well-left"><small>LeftText</small></div>
    <div class="well-center"><small>CenterText</small></div>
    <div class="well-right"><small>RightText</small></div>
</div>

这有什么帮助吗？ http://jsfiddle.net/498bc/11/

使用向左/向右拉动时，Bootstrap无法正确对齐文本

3 个答案: