Выровнять div прямо в Bootstrap 3

Есть ли способ в Bootstrap 3 для выравнивания div?

Мне известны возможности смещения, но я хочу выровнять форматированный div справа от его контейнера, в то время как он должен быть сосредоточен в мобильном представлении с полной пропускной способностью. Класс "pull-right" больше не работает. Забыли ли они заменить его или я пропустил что-то очевидное?

<div class="row">
  <div class="container">
    <div class="col-md-4">
      left content
    </div>
    <div class="col-md-4 col-md-offset-4">
      <!-- The next div has a background color and its own paddings and should be aligned right-->
      <!-- It is now in the right column but aligned left in that column -->
      <div class="yellow_background">right content</div>
    </div>
  </div>
</div>

Shure Я знаю, как это сделать в CSS, но можно ли это сделать в чистом бутстрапе 3?

Ответы

Ответ 1

Класс pull-right все еще присутствует в Bootstrap 3 См. 'вспомогательные классы здесь

pull-right определяется

.pull-right {
  float: right !important;
}

без дополнительной информации о стилях и содержании, это трудно сказать.

Он определенно тянет прямо в этом JSBIN когда страница более широкая, чем 990px ​​- это когда стиль col-md запускается, Bootstrap 3 является мобильным первым и всеми.

Ответ 2

Вы имеете в виду что-то вроде этого:

HTML

<div class="row">
  <div class="container">

    <div class="col-md-4">
      left content
    </div>

    <div class="col-md-4 col-md-offset-4">

      <div class="yellow-background">
        text
        <div class="pull-right">right content</div>  
      </div>

    </div>
  </div>
</div>

CSS

.yellow-background {
  background: blue;
}

.pull-right {
  background: yellow;
}

Полный пример можно найти на Codepen.

Ответ 3

Я думаю, что вы пытаетесь выровнять содержимое вправо в div, div со смещением уже нажимает на себя вправо, здесь некоторый код и LIVE sample:
FYI: .pull-right только нажмите div вправо, но не содержимое внутри div.

HTML:

<div class="row">
  <div class="container">
    <div class="col-md-4 someclass">
      left content
    </div>
    <div class="col-md-4 col-md-offset-4 someclass">
      <div class="yellow_background totheright">right content</div>
    </div>
  </div>
</div>

CSS

.someclass{ /*this class for testing purpose only*/
    border:1px solid blue;
    line-height:2em;
}

.totheright{ /*this will align the text to the right*/
  text-align:right;
}

.yellow_background{
    background-color:yellow;
}

Другая модификация:

...
<div class="yellow_background totheright">
  <span>right content</span>
  <br/>image also align-right<br/>
  <img width="15%" src="https://www.google.com/images/srpr/logo11w.png"/>
</div>
...

надеюсь, что это очистит вашу проблему.

Ответ 4

Bootstrap 4+ внес изменения в служебные классы для этого. Из документации:

Добавлены .float-{sm,md,lg,xl}-{left,right,none} для отзывчивых .pull-left плавающей точкой и удалены .pull-left и .pull-right поскольку они избыточны для .float-left и .float-right.

Поэтому используйте .float-right (или эквивалентный размер, например .float-lg-right) вместо .pull-right для выравнивания по правому краю, если вы используете более новую версию Bootstrap.

Ответ 5

Добавьте offset8 в свой класс, например:

<div class="offset8">aligns to the right</div>