Bootstrap 4 выравнивание по правому краю: Float. Утилиты · Bootstrap. Версия v4.0.0

html — Как «приклеить» блок к правому краю, если он внутри .col (Bootstrap)?

Вопрос задан 3 года назад

Изменён 3 года назад

Просмотрен 816 раз

Как приклеить блок .test4 к правому краю? Я пробовал его помещать в родительский блок с position: relative, а самому ему давать position: absolute и right:0, но получается как на картинке:

Тут видно что стандартный Bootstrap отступ по краям мешает прижать блок к правому краю.

.container,
.row {
  height: 100vh;
}

.test1 {
  background: #ccc;
}

.test2 {
  background: #aaa;
}

.test3 {
  background: #999;
}

.test4 {
  background: gold;
  height: 50px;
  width: 50px;
}

    <link rel="stylesheet" href="https://stackpath.  bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<div>
  <div>
    <div>
      test1
    </div>
    <div>
      test2
    </div>
    <div>
      test3
      <div>test4</div>
    </div>
  </div>
</div>

• html
• css
• bootstrap

Если элемент не относится к bootstrap контейнеру, правильно его будет вынести с класса .container

HTML

 <div>
        <div>
            <div>
                <div>
                    test1
                </div>
                <div>
                    test2
                </div>
                <div>
                    test3
                </div>
            </div>
        </div>
        <div>test4</div>
    </div>

CSS

. test4 {
    position: absolute;
    top: 0;
    right: 0;
    background: gold;
    height: 50px;
    width: 50px;
}

2

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

css — Выравнивание по правому краю

Задать вопрос

Вопрос задан 4 года назад

Изменён 4 года назад

Просмотрен 103 раза

Не получается перенести последний пункт меню (Logout) вправо.

Классы float-right и text-right не помогают. Bootstrap4

<header>
    <nav>
        <div>
            <ul>
                <li>
                    <a href="/admin">Profile</a>
                </li>
                <li>
                    <a href="/admin/users">Users</a>
                </li>
                <li>
                    <a href="/admin/products">Products</a>
                </li>
                {% if (app.session.user_hash) %}
                    <li>
                        <a href="/logout">Logout</a>
                    </li>
                {% endif %}
            </ul>
        </div>
    </nav>
</header>

• css
• bootstrap4

1

Вся прелесть в том, что нужно вынести последнюю ссылку за список.

nav {
  height: 100%;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<header>
  <nav>
    <div>
      <div>
        <ul>
          <li>
            <a href="#">Home</a>
          </li>
          <li>
            <a href="#">Pricing</a>
          </li>
          <li>
            <a href="#">Pricing</a>
          </li>
          <li>
            <a href="#">Pricing</a>
          </li>
        </ul>
        <a href="#">Another Link</a>
      </div>
    </div>
  </nav>
</header>

Preview на всю страницу открывайте

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Пользовательский интерфейс

— выравнивание по левому краю и выравнивание по правому краю внутри div в Bootstrap

спросил 9 лет, 7 месяцев назад

Изменено 1 год, 6 месяцев назад

Просмотрено 1,3 млн раз

Каковы некоторые из распространенных способов выравнивания по левому краю некоторого текста и выравнивания по правому краю другого текста в контейнере div в начальной загрузке?

напр.

 Общая стоимость $42
 

Суммарная стоимость должна быть выровнена по левому краю, а $42 — по правому краю. 0

2021 Update…

Bootstrap 5 (beta)

Для выравнивания внутри div flexbox или row …

• мл-авто теперь мс-авто
• г-авто теперь я-авто

Для выравнивания текста или поплавков..

• text-left теперь text-start
• text-right теперь text-end
• float-left теперь float-start
• float-right теперь float-end

Bootstrap 4+

• тянуть вправо теперь плавать вправо
• text-right такой же, как 3.x, и работает для встроенных элементов
• оба float-* и text-* реагируют на различное выравнивание при разной ширине (например: float-sm-right )

Утилита flexbox (например: justify-content-between ) также может использоваться для выравнивания:

 

      <дел>
         левый
      
      <дел>
         верно