使用向左拉/向右拉时引导程序未正确对齐文本

Bootstrap well not aligning text correctly when using pull-left/pull-right

本文关键字：对齐 文本 引导程序      更新时间：2023-09-26

我正在使用bootstrap 3绘制一个有3个区域的井：左侧区域、中间区域和右侧区域。在每个区域，我都会绘制文本，输入数据并使用一些图形。

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

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

点击这里查看jsfiddle：jsfiddle示例

如何修复它并使其在正确对齐的情况下工作？

谢谢你的帮助。

您可以这样做。

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

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

您不使用引导列的具体原因是什么？

我会试试：

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

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

相关文章：