Bootstrap在使用向左/向右拖動時無法正確對齊文本

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

我該如何解決它並使其以正確的方式工作？

感謝您的任何幫助。

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

您不使用引導程序列的任何特定原因？

我會嘗試：

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