Twitter завантажувальний плаваючий дивіться справа


142

Який правильний спосіб bootstrapздійснити плавання вправо? Я думав, що pull-rightце рекомендований спосіб, але він не працює.

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
 .container {
    margin-top: 10px;
}
<div class="container">
    <div class="row-fluid">
        <div class="span6">
            <p>Text left</p>
        </div>
        <div class="span6 pull-right">
            <p>text right</p>
        </div>
    </div>
</div>


Ви хочете плавати текст ?? Подивіться на csstext-align
Рон ван дер Хайден

Чи не існує вбудованого (стандартного) способу у завантажувальному закладі?
Джастін

Відповіді:


85

У вас є два розгалуження span6 у вашому рядку, так що вони займуть цілих 12 прольотів, з яких складається рядок.

Додавання потягу праворуч до другого розділу span6 не буде нічого робити, оскільки він вже сидить праворуч.

Якщо ви маєте на увазі, що ви хочете, щоб текст у другому розділі span6 був вирівняний праворуч, тоді просто додайте до цього класу новий клас і надайте йому значення вирівнювання тексту: правильне значення, наприклад

.myclass {
    text-align: right;
}

ОНОВЛЕННЯ:

EricFreese вказав, що у версії 2.3 Bootstrap (минулого тижня) вони додали класи утиліти, які можна використовувати:

  • .text-left
  • .text-center
  • .text-right

http://twitter.github.com/bootstrap/base-css.html#typography


5
Схоже , що вони додали допоміжні класи для вирівнювання тексту в 2.3 : .text-left, .text-centerі.text-right
Ерік Фриз

1
@EricFreese - Ти маєш рацію - не помітив цього оновлення - я оновив свою відповідь.
Біллі Мот

Це не повинно бути прийнятою відповіддю. Існує вбудований клас завантаження pull-right(кредит до @Amit); IMO, чистіше використовувати вбудований клас Bootstrap ... і ОП запитав це у своєму питанні
Колоб Каньйон

107

pull-rightРекомендований спосіб здійснити плавання діва праворуч , я вважаю, що ви все робите правильно, можливо, вам потрібно лише користуватисяtext-align:right;

  <div class="container">
     <div class="row-fluid">
      <div class="span6">
           <p>Text left</p>
      </div>
      <div class="span6 pull-right" style="text-align:right">
           <p>text right</p>
      </div>
  </div>
 </div>      
 </div>

на жаль, pull-rightбуло знято з версією 3.1: getbootstrap.com/components/#dropdowns-alignment
il

12
@ ılǝ ".. ми застаріли .pull-права у спадному меню ." Це не стосується інших звичних звичок.
user2864740

78

bootstrap 3 має клас для вирівнювання тексту в розділі

<div class="text-right">

вирівняє текст праворуч

<div class="pull-right">

витягне праворуч увесь вміст не лише тексту


text-right, text-leftі text-centerпрацює чудово. І відповідно вирівнює текст відповідно до контейнера.
Аніш Найр

дякую @BojanKogoj, насправді витягнутий правий режим було вимкнено для випадаючих меню в версії 3.1: getbootstrap.com/components/#dropdowns-alignment
il

27

Це робить трюк, без необхідності додавати стиль вбудованого

<div class="row-fluid">
    <div class="span6">
        <p>text left</p>
    </div>
    <div class="span6">
        <div class="pull-right">
            <p>text right</p>
        </div>
    </div>
</div>

Відповідь полягає у введенні ще одного <div>класу "тягнути праворуч". Поєднання двох класів не вийде.


1
Це має бути правильна відповідь. Сенс Bootstrap - уникнути необхідності безпосередньо стикатися зі стилями.
Крістен Уейт

18
<p class="pull-left">Text left</p>
<p class="text-right">Text right in same line</p>

Ця робота для мене.

edit: Приклад із вашим фрагментом:

@import url('https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.css');
 .container {
    margin-top: 10px;
}
<div class="container">
    <div class="row-fluid">
        <div class="span6 pull-left">
            <p>Text left</p>
        </div>
        <div class="span6 text-right">
            <p>text right</p>
        </div>
    </div>
</div>


3

Ви можете призначити назву класу, як текстовий центр, ліворуч або праворуч. Текст буде відповідний відповідно до цього імені класу. Вам не потрібно робити окрему назву класу окремо. Ці класи вбудовані у BootStrap 3 та bootstrap 4.

Завантаження 3

v3 Документи вирівнювання тексту

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

Завантаження 4

v4 Документи вирівнювання тексту

<p class="text-xs-left">Left aligned text on all viewport sizes.</p>
<p class="text-xs-center">Center aligned text on all viewport sizes.</p>
<p class="text-xs-right">Right aligned text on all viewport sizes.</p>

<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p>
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.