Bootstrap CSS Pull-Right issue

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 для divs.

Answer 4

Похоже, что он тянет div справа, но пролеты все еще выровнены в пределах div. Разделить div на 2 пролета, по одному для каждой линии.

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

Answer 5

В основном то, что вы ищете text-align:right. Используйте его, чтобы получить желаемый результат. Если вы хотите, чтобы и диапазон, и задний текст были выведены вправо, используйте ответ @ van-tuan-pham. Или используйте только для пролета.

Но не переопределяйте классы начальной загрузки. Вместо этого используйте собственные классы или идентификаторы для установки атрибутов css.

Answer 6

просто сделать, как таким образом

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

<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"> 
 
    \t <h4>Active <span>(dates & replacement if applicable)</span></h4> 
 
    </div> 
 
    </div> 
 
</div>

Answer 7

заменить ROW Див код со следующими:

<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 text-right" ><span><h4>Active</h4>(dates & replacement if applicable)</span></div> 
    </div>