Bootstrap CSS Pull-Right问题

Question

我有一段非常简单的代码，我正在努力工作并给我提出问题。

我有一个9和3的网格设置。 9是工具标题，3是工具的状态。

但是，在下面的代码中，即使我使用pull-right将内容放到col-md-3的右侧，其中的内容也不会像我预期的那样与右边对齐它是。

这是一个小提琴：https://jsfiddle.net/p5yctnw0/2/

<div class="container-fluid">
  <div class="row">
    <div class="col-md-9">
      <h1 class="toolTitle">Tool Title <small class="toolSubTitle">#244</small></h1>
    </div>
    <div class="col-md-3"><span class="pull-right"><h4>Active</h4>(dates & replacement if applicable)</span></div>
  </div>
</div>

我期待的是什么：

我知道这将是一个愚蠢的css属性我错过但不知道还有什么可以尝试。

Answer 1

内容与右侧对齐，但文字未对齐。使用text-right css类右对齐文本。

<span class="pull-right text-right">
  <h4>Active</h4>
  (dates & replacement if applicable)
</span>

Answer 2

您可以使用右侧的文字：

 .col-md-3 {text-align:right}

https://jsfiddle.net/p5yctnw0/5/

Answer 3

https://jsfiddle.net/p5yctnw0/3/

在文字方面使用课程text-right。 pull-right用于div。

Answer 4

看起来它将div拉向右边，但是跨距仍然在div内对齐。 将div拆分为2个跨度，每行一个。

＆＃13;

＆＃13;

<div class="col-md-3">
  <span class="pull-right">
    <h4>Active</h4>
  </span>
  <span class="pull-right">(dates & replacement if applicable)</span>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 5

基本上你要找的是text-align:right。用它来获得你想要的输出。如果你想要拉出跨度和尾随文本，请使用@ van-tuan-pham的答案。或仅用于跨度。

但是不要覆盖bootstrap类。而是使用您自己的类或id选择器来设置css属性。

Answer 6

简单地这样做

＆＃13;

＆＃13;

.alignment {
	text-align:right;
}
.alignment span {
	display:block;
	font-size:13px;
}

＆＃13;

<div class="container-fluid">
  <div class="row">
    <div class="col-md-9">
      <h1 class="toolTitle">Tool Title <small class="toolSubTitle">#244</small></h1>
    </div>
    <div class="col-md-3 alignment">
    	<h4>Active <span>(dates & replacement if applicable)</span></h4>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;