Bootstrap float right: Float · Bootstrap v5.0

Содержание

Float. Утилиты · Bootstrap. Версия v4.0.0

Переключайте float на любой элемент, через любую контрольную точку, используя наши гибкие float-утилиты.



Обзор


Эти классы располагают элемент слева или справа, или выключают «прибивку» к определенному краю, основываясь на текущем размере области видимости, используя свойство float в CSS. Здесь задано !important, чтобы избежать проблем со специфичностью. Эти классы используют такие же брейкпойнты, как наша система сеток.


Классы


Переключайте состояние флоата классами:


К левому краю на всех областях видимости

К правому краю на всех областях видимости

Без стороны выравнивания на всех областях видимости

<div>К левому краю на всех областях видимости</div><br>
<div>К правому краю на всех областях видимости</div><br>
<div>Без стороны выравнивания на всех областях видимости</div>


Миксины


Или делайте это миксинами Sass:


. element {
  @include float-left;
}
.another-element {
  @include float-right;
}
.one-more {
  @include float-none;
}

Отзывчивость


Вариации с отзывчивым поведением также существуют для каждого значения float.


К левому краю на областях видимости маленьких SM (small) или шире

К левому краю на областях видимости средних MD (medium) или шире

К левому краю на областях видимости больших LG (large) или шире

К левому краю на областях видимости сверхбольших XL (extra-large) или шире

<div>К левому краю на областях видимости маленьких SM (small) или шире</div><br>
<div>К левому краю на областях видимости средних MD (medium) или шире</div><br>
<div>К левому краю на областях видимости больших LG (large) или шире</div><br>
<div>К левому краю на областях видимости сверхбольших XL (extra-large) или шире</div><br>


Вот все поддерживаемые классы:


  • . float-left

  • .float-right

  • .float-none

  • .float-sm-left

  • .float-sm-right

  • .float-sm-none

  • .float-md-left

  • .float-md-right

  • .float-md-none

  • .float-lg-left

  • .float-lg-right

  • .float-lg-none

  • .float-xl-left

  • .float-xl-right

  • .float-xl-none

Bootstrap 4 float-right не работает с навигационной панелью

Это и есть код. Мне нужно переместить навигационную панель (без логотипа) в правую сторону.

Поэтому я добавил float-right к like <div> .

Но это не сработало.

Полный Код

<nav>
      <a href="#">Popular Quotes Collection</a>
      <button type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span></span>
      </button>

      <div>
        <ul>
          <li>
            <a href="#">Home <span>(current)</span></a>
          </li>
          <li>
            <a href="#">Submit a Quote</a>
          </li>
        </ul>
      </div>
    </nav>

css

twitter-bootstrap

twitter-bootstrap-4

Поделиться

Источник


Sasa1234    

06 октября 2017 в 01:59

3 ответа

  • CSS float-right не работает в Bootstrap 4 Navbar

    Я пытаюсь заставить свои навигационные ссылки плавать справа от моего navbar, но я не могу заставить его работать. Я пробовал использовать классы. float-right, float-xs-right и justify-content-end bootstrap 4, а также использовать float: right !important; в моем файле CSS, но это все равно не…

  • Float right element inside Bootstrap 4 thumbnail работает иначе, чем Bootstrap 3

    <div> <img src=a.jpg> </div> Вот что у меня есть в файле html с bootstrap 4 css. Изображение помещается в красивую коробку. Когда я добавляю заголовок h5, он также появляется под изображением внутри коробки. <div…


8

Просто добавьте:

  • .justify-content-end — .navbar-collapse

  • Удалите поплавки, по умолчанию bootstrap 4 равно flexbox, чтобы вы могли воспользоваться этим.

Подобный этому:

<div>

Рабочий размер Fiddle

Поделиться


Syden    

06 октября 2017 в 02:41


0

Вы не можете использовать float, потому что bs4 использует дисплей: flex;
Вы можете использовать класс: ‘justify-content-between’ или узнать больше о классе bootstrap4 flex на этой странице https://getbootstrap. com/docs/4.0/utilities/flex/

Поделиться


Nam PHAM HOANG    

06 октября 2017 в 02:09


0

На самом деле вам вообще не нужно применять float-right , а скорее navbar-toggler-right :

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

<nav>
  <a href="#">Popular Quotes Collection</a>
  <button type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span>Toggle</span>
  </button>
  <div>
    <ul>
      <li>
        <a href="#">Home <span>(current)</span></a>
      </li>
      <li>
        <a href="#">Submit a Quote</a>
      </li>
    </ul>
  </div>
</nav>

Надеюсь, это поможет! 🙂

Поделиться


Obsidian Age    

06 октября 2017 в 02:09

  • Смещение якоря прокрутки в HTML с фиксированной навигационной панелью Bootstrap 4

    Итак, у меня есть одна страница, которая состоит из нескольких разделов. Пользователи могут перейти к этим разделам, прокручивая себя или щелкая на навигационной панели (a href с якорем). Из-за того, что навигационная панель Bootstrap 4 закреплена сверху, содержимое помещается под нее. Есть ли…

  • Css ошибка с навигационной панелью

    У меня возникла странная проблема с переключателем всякий раз, когда он находится внутри моей навигационной панели webs, я сделал fiddle, чтобы воспроизвести эту проблему: Репликация проблемы <header> <div class=navbar-fixed> <nav style=background: #F30617 role=navigation>…

Похожие вопросы:

модальные появляются за фиксированной навигационной панелью

Итак, у меня есть сайт на основе bootstrap с фиксированной навигационной панелью (которые следуют за вами по странице вверху), и когда я хочу показать модальное всплывающее окно, оно появляется за…

Bootstrap 3. 0 и плагин nicescroll появились под навигационной панелью

Я использую Bootstrap 3.0 с плагином nicescroll, в моем проекте я использую navbar-fixed-top и оставляю 50px padding top , так что все работает хорошо, Проблема в том, что плагин nicescroll показан…

Bootstrap v4 float-right не работает. [Замена тяги вправо]

В принципе, у меня есть последняя версия bootstrap Currently v4.0.0-beta.3 , и я не могу заставить элементы правильно выровняться с официальной документацией. Я искал решения в интернете, но ничего…

CSS float-right не работает в Bootstrap 4 Navbar

Я пытаюсь заставить свои навигационные ссылки плавать справа от моего navbar, но я не могу заставить его работать. Я пробовал использовать классы. float-right, float-xs-right и justify-content-end …

Float right element inside Bootstrap 4 thumbnail работает иначе, чем Bootstrap 3

<div> <img src=a.jpg> </div> Вот что у меня есть в файле html с bootstrap 4 css. Изображение помещается в красивую коробку. Когда я добавляю…

Смещение якоря прокрутки в HTML с фиксированной навигационной панелью Bootstrap 4

Итак, у меня есть одна страница, которая состоит из нескольких разделов. Пользователи могут перейти к этим разделам, прокручивая себя или щелкая на навигационной панели (a href с якорем). Из-за…

Css ошибка с навигационной панелью

У меня возникла странная проблема с переключателем всякий раз, когда он находится внутри моей навигационной панели webs, я сделал fiddle, чтобы воспроизвести эту проблему: Репликация проблемы…

Свойство Bootstrap 4 float не работает с элементами SVG

Как мне получить мои svg к float:right; и float:left; в следующем codepen ? Я использую служебные классы float-right и float-left Bootstrap 4 . Но это не работает на моих элементах <div> . Я…

.float-right &. float-left не работает внутри .row в bootstrap 4

В bootstrap 4 поплавок не работает внутри в строке. мне нужно div в левой и левой div в порядке, но в отзывчивый вид мне нужен див сначала, а потом левый див. <div class=row> <div…

Bootstrap 4: оправдать меню справа в навигационной панели?

Я работаю с навигационной панелью Bootstrap 4 по умолчанию и просто хочу добавить сворачивающееся меню, которое расположено справа, а не слева, когда оно не свернуто. Я попытался добавить text-right…

bootstrap-4 — Что случилось с классами .pull-left и .pull-right в Bootstrap 4?

В последней версии pull-left и pull-right были заменены на .pull- {xs, sm, md, lg, xl} — {left, right, none}

Это означает, что вместо того, чтобы писать простой class="pull-right", теперь мне придется написать class="pull-md-right pull-xl-right pull-lg-right pull-sm-right pull-xs-right"

Есть ли способ сделать это менее утомительно?

107

Kevin J

23 Сен 2016 в 10:30

9 ответов

Лучший ответ

Еще в 2016 году, когда этот вопрос был первоначально задан, ответ был:

$('. pull-right').addClass('pull-xs-right').removeClass('pull-right')

Но теперь общепринятым ответом должен быть Роберт Вент.

15

Phillip Senn
8 Мар 2018 в 19:28

Классы: float-right float-sm-right и т. Д.

Медиа-запросы ориентированы в первую очередь на мобильные устройства, поэтому использование float-sm-right повлияет на малые размеры экрана и все, что шире, поэтому нет причин добавлять класс для каждой ширины. Просто используйте самый маленький экран, на который хотите повлиять, или float-right для любой ширины экрана.

Официальные документы:

Классы: https://getbootstrap.com/docs/4.4/utilities/float/

Обновление: https://getbootstrap.com/docs/4.4/migration/#utilities

Если вы обновляете существующий проект на основе более ранней версии Bootstrap, вы можете использовать sass extend для применения правил к старым именам классов:

. pull-right {
    @extend .float-right;
}
.pull-left {
    @extend .float-left;
}

213

Robert Went
18 Мар 2020 в 19:56

Обновление 2018 (начиная с Bootstrap 4.1)

Да, pull-left и pull-right были заменены на float-left и float-right в Bootstrap 4.

Однако float не будет работать во всех случаях, поскольку Bootstrap 4 теперь является flexbox .

Чтобы выровнять дочерние элементы flexbox по правому краю, используйте автоматические поля (например: ml-auto) или утилиты flexbox (например: justify-content-end, align-self-end и т. Д.).

Примеры

Навигаторы: 

<ul>
   <li><a href>Link</a></li>
   <li><a href>Link</a></li>
   <li><a href>Right</a></li>
</ul>

Панировочные сухари: 

<ul>
    <li><a href="/">Home</a></li>
    <li><a href="/">Link</a></li>
    <li><a href="/">Right</a></li>
</ul>

https://www. codeply.com/go/6ITgrV7pvL

Сетка: 

<div>
    <div>Left</div>
    <div>Right</div>
</div>

25

Zim
3 Авг 2018 в 12:25

Если вы хотите использовать их с столбцами в другой работе с классами col-*, вы можете использовать классы order-*.

Вы можете контролировать порядок своих столбцов с помощью классов порядка. дополнительные сведения см. в документации Bootstrap 4

Простая документация из начальной загрузки:

<div>
  <div>
    <div>
      First, but unordered
    </div>
    <div>
      Second, but last
    </div>
    <div>
      Third, but first
    </div>
  </div>
</div>

6

Behnam Azimi
14 Май 2018 в 13:48

Больше у меня ничего не работало. Этот сделал. Это может кому-то помочь.

<div>
  <span>Float left</span>
  <span>Float right</span>
</div>

Обернуть все в div clearfix — это ключ.

5

Ojas Kale
5 Сен 2018 в 14:15

Я смог сделать это с помощью следующих классов в моем проекте

d-flex justify-content-end

<div>

4

Mallek
6 Дек 2017 в 20:15

Для кого-то еще и просто дополнения к Роберту, если ваша навигация имеет значение гибкого отображения, вы можете переместить нужный вам элемент вправо, добавив это в его css

{
    margin-left: auto;
}

-1

mbougarne
4 Авг 2017 в 00:06

Bootstrap-4 добавить класс float-left или right для плавающего

0

Arsalan Ahmad Khan
17 Май 2018 в 05:56

Изменено на float-right float-left float-xx-left и float-xx-right

16

Jakub Muda
8 Сен 2019 в 00:23

Float · Bootstrap v4.

5

Посмотреть на GitHub
Оригинал

Переключайте числа с плавающей запятой на любом элементе и в любой точке останова с помощью наших гибких утилит с плавающей запятой.

Обзор

Эти служебные классы перемещают элемент влево или вправо или отключают плавающее положение в зависимости от текущего размера области просмотра с помощью свойства CSS float. !important включен, чтобы избежать проблем со специфичностью. Они используют те же точки останова области просмотра, что и наша сеточная система. Имейте в виду, что плавающие утилиты не влияют на гибкие элементы.

Классы

Переключить плавающий элемент с классом:

Плавающий слева на всех размерах области просмотра

Плавающий справа при всех размерах области просмотра

Не плавающий при всех размерах области просмотра

<div>Плавающий слева на всех размерах области просмотра</div><br>
<div>Плавающий справа при всех размерах области просмотра</div><br>
<div>Не плавающий при всех размерах области просмотра</div>

Миксины

Или с помощью миксина Sass:

. element {
  @include float-left;
}
.another-element {
  @include float-right;
}
.one-more {
  @include float-none;
}

Адаптивный

Адаптивные варианты также существуют для каждого значения float.

Плавающие влево на размере окна просмотра SM (маленький) или шире

Плавающие влево на размере окна просмотра MD (средний) или шире

Плавающие влево на размере окна просмотра LG (большой) или шире

Плавающие влево на размере окна просмотра XL (очень большой) или шире

<div>Плавающие влево на размере окна просмотра SM (маленький) или шире</div><br>
<div>Плавающие влево на размере окна просмотра MD (средний) или шире</div><br>
<div>Плавающие влево на размере окна просмотра LG (большой) или шире</div><br>
<div>Плавающие влево на размере окна просмотра XL (очень большой) или шире</div><br>

Вот все классы поддержки;

  • . float-left
  • .float-right
  • .float-none
  • .float-sm-left
  • .float-sm-right
  • .float-sm-none
  • .float-md-left
  • .float-md-right
  • .float-md-none
  • .float-lg-left
  • .float-lg-right
  • .float-lg-none
  • .float-xl-left
  • .float-xl-right
  • .float-xl-none

Как я могу заставить кнопки Twitter-Bootstrap правильно выравниваться?

У меня есть простая демонстрация здесь:

http://jsfiddle.net/HdeZ3/1/

<ul>
    <li>One <input value="test"></li>
    <li>Two <input value="test2"></li>
</ul>

У меня есть неупорядоченный список, и для каждого элемента списка я хочу иметь текст слева, а затем правую выровненную кнопку. Я попытался использовать pull-right, но это полностью испортило выравнивание. Что я делаю неправильно?

ОТВЕТЫ

Ответ 1

Вставьте pull-right в атрибут класса и дайте бутстрапу упорядочить кнопки.

Для Bootstrap 2.3 см.: http://getbootstrap.com/2.3.2/components.html#misc > Классы помощников>.pull-right.

Для Bootstrap 3 см. Https://getbootstrap.com/docs/3.3/css/#helper-classes > Классы-помощники.

Для Bootstrap 4 см. Https://getbootstrap.com/docs/4.0/utilities/float/#responsive

Команда pull-right была удалена и заменена на float-right или вообще на float-{sm,md,lg,xl}-{left,right,none}

Ответ 2

В twitter bootstrap 3 попробуйте класс pull-right

class="btn pull-right"
Ответ 3

«pull-right» класс может быть неправильным, потому что вместо «выравнивания текста» используется «float: right».

Проверка файла bootstrap 3 css я нашел класс «text-right» в строке 457. Этот класс должен быть правильным способом выровнять текст вправо.

Некоторые коды:

<div>
    <div>
        <div>
            <button type="button">Default</button>
        </div>
    </div>
</div>
Ответ 4

Обновление 2018 — Bootstrap 4.0.0

Класс pull-right теперь float-right в Bootstrap 4…

    <div>
        <div>One <input type="button" value="test"></div>
        <div>Two <input type="button" value="test"></div>
    </div>

http://www.codeply.com/go/nTobetXAwb

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

float-right все еще не работает?

Помните, что Bootstrap 4 теперь flexbox, и многие элементы display:flex который может помешать работе float-right. В некоторых случаях классы-утилиты, такие как align-self-end или ml-auto работают для выравнивания элементов, которые находятся внутри контейнера flexbox, такого как Bootstrap 4.row, Card или Nav.

Также помните, что text-right все еще работает с встроенными элементами.

Bootstrap 4 выровнять правильные примеры

Бутстрап 3

Используйте класс pull-right.

Ответ 5

Используйте тег button вместо input и используйте класс pull-right.

pull-right класс полностью испортил обе ваши кнопки, но вы можете исправить это, указав пользовательский запас с правой стороны.

<button type="button">Save</button>
<button  type="button">Cancel</button>

Затем используйте следующий CSS для класса

.RbtnMargin { margin-left: 5px; }
Ответ 6

Добавляя к принятому ответу, при работе в контейнерах и столбцах, которые были созданы в дополнение к бутстрапу, у меня иногда есть полный растянутый столбец с дочерним div, который делает вытягивание таким, каким он есть.

<div>
  <div>
      <div>
            <p>I am right aligned, factoring in container column padding</p>
      </div>
  </div>
</div>

В качестве альтернативы добавьте все столбцы к вашему полному количеству столбцов сетки (по умолчанию 12), а также чтобы первый столбец был смещен.

<div>
  <div>
        This content and its sibling..
  </div>
  <div>
        are right aligned as a whole thanks to the offset on the first column and the sum of the columns used is the total available (12).
  </div>
</div>
Ответ 7

Извините за ответ на более старый уже ответивший вопрос, но я подумал, что должен указать несколько причин, по которым ваш jsfiddle не работает, если другие проверяют это и задаются вопросом, почему класс pull-right, описанный в принятый ответ не работает.

  • URL-адрес файла bootstrap.css недействителен. (возможно, это сработало, когда вы задали вопрос).
  • вам следует добавить атрибут: type = «button» к вашему элементу ввода, иначе он не будет отображаться как кнопка — он будет отображаться как поле ввода. Еще лучше, используйте элемент <button>.
  • Кроме того, поскольку pull-right использует float, вы получите некоторое ошеломление компоновки кнопок, потому что каждый LI не имеет достаточной высоты для размещения высоты кнопки. Добавление некоторого количества строк или min-height css в LI будет адресовано этому.

рабочая скрипка: http://jsfiddle.net/3ejqufp6/

<ul>
  <li>One <input type="button" value="test"/></li>
  <li>Two <input type="button" value="test2"/></li>
</ul>

(Я также добавил минимальную ширину к кнопкам, поскольку я не мог выдержать вид оборванного правоподобного взгляда на кнопки из-за различной ширины:))

Ответ 8

Использование помощника Bootstrap pull-right не сработало для нас, поскольку оно использует float: right, который заставляет inline-block элементы стать block. И когда .btn становятся block, они теряют естественный запас, который inline-block предоставлял им как квазитекстовые элементы.

Таким образом, вместо этого мы использовали direction: rtl; для родительского элемента, что заставляет текст внутри этого элемента рисовать справа налево, и это также приводит к тому, что элементы inline-block будут размещаться справа налево. Вы можете использовать LESS следующим образом, чтобы дети не были выложены rtl тоже:

/* Flow the inline-block .btn starting from the right. */
.btn-container-right {
  direction: rtl;

  * {
    direction: ltr;
  }
}

и используйте его как:

<div>
    <button>Click Me</button>
</div>
Ответ 9

Применить класс pull-right для кнопки.
http://getbootstrap.com/css/#helper-classes-floats → Классы помощников

Эта ссылка поможет

Ответ 10

Понижающее право было амортизировано по состоянию на v3. 1.0.
Просто голова.

http://getbootstrap.com/components/#callout-dropdown-pull-right

Ответ 11
<ul>
    <li>One <input value="test"></li>
    <li>Two <input value="test2"</li>
</ul>

Я просто использовал макет.. стили для li..

или

<ul>
    <li>One <input value="test"></li>
    <li>Two <input value="test2"</li>
</ul>

в CSS

li {
    line-height: 20px;
    margin: 5px;
    padding: 2px;
}
Ответ 12

Можете ли вы попробовать собственный CSS в сторону загрузочного CSS, чтобы увидеть, есть ли какие-либо изменения. Попробуйте

.move-rigth{
    display: block;
    float: right;
}

Если он работает, вы можете попытаться манипулировать тем, что у вас есть, или добавить к нему другое форматирование и добиться того, чего хотите. Поскольку вы используете bootstrap, это не значит, что если он не предлагает вам то, что вы хотите, вы просто управляете им. Вы работаете с вашими кодами, и вы приказываете ему делать то, что вы говорите.
Ура!

Ответ 13

Теперь вам нужно добавить .dropdown-menu-right в существующий элемент .dropdown-menu. pull-right больше не поддерживается. Подробнее здесь http://getbootstrap.com/components/#btn-dropdowns

Ответ 14

вы также можете использовать пустые столбцы, чтобы дать пробелы слева

like

<div>
    <div></div>  <!-- blank space increase or decrease it by column # -->
        <div>
            <button name="saveedit">Save</button>
        </div>
</div>

Демо::
Jsfiddle demo

Ответ 15

В Bootstrap 4: попробуйте этот путь с помощью Flexbox. См. Документацию в getbootstrap

<div>
  <div>
    <div>
      <button type="button">Example 1</button>
      <button type="button">Example 2</button>
    </div>
  </div>
</div>
Ответ 16

Из Bootstrap V3. 3.1 следующий стиль CSS решит эту проблему

.modal-open{
    padding-right: 0 !important;
}

Примечание. Я пробовал все предложения в сообщениях выше, и все адреса более старых версий и не предоставляют исправления для версий бутстрапов в новостях.

Ответ 17

для начальной загрузки 4 документация

  <div>
    <div>
      Start of the row
    </div>
    <div>
      End of the row
    </div>
  </div>

bootstrap 4 Пример кода float right

Пример 1: float right bootstrap 

  
 Плавающий слева на всех размерах области просмотра 
 


 Плавать вправо при всех размерах области просмотра 
 


 Не перемещаться при всех размерах области просмотра

Пример 2: бутстрап выровнять по правому краю 

  Для выравнивания div в начальной загрузке вы можете использовать классы начальной загрузки, например
1.  плавающий-левый
2. поплавок вправо
3. float-none


 Плавающий слева на всех размерах области просмотра 
 


 Плавать вправо при всех размерах области просмотра 
 


 Не перемещаться при всех размерах области просмотра

Пример 3: бутстрап 5 с плавающей точкой вправо 

 .плавающий старт
.float-end
.float-none
.float-sm-start
.float-sm-end
.float-sm-none
.float-md-start
.float-md-end
.float-md-none
.float-lg-start
.float-lg-end
.float-lg-none
.float-xl-start
.float-XL-конец
.float-XL-none
.float-xxl-start
.float-XXL-конец
.float-xxl-none

Пример 4: float в бутстрапе 

  Переключайте числа с плавающей запятой на любом элементе и в любой точке останова с помощью наших адаптивных утилит с плавающей запятой.

 Плавающий слева на всех размерах области просмотра 
 


 Плавать вправо при всех размерах области просмотра 
 


 Не перемещаться при всех размерах области просмотра

Пример 5: класс начальной загрузки float right 

  

  
     Пример начальной загрузки 
    
    
    
    
    



  

    
 Пример 

    

      
 Этот текст справа. 
 

      
 Этот текст слева. 
 

      
 Поплавок удален

Как перемещать кнопку вправо и влево с помощью Bootstrap

Tutorialdeep »Ноу-хау» Часто задаваемые вопросы по Bootstrap »Как перемещать кнопку вправо и влево с помощью Bootstrap

Из этого руководства вы узнаете, как перемещать кнопку вправо и влево с помощью Bootstrap. Короткий ответ: для использования классов Bootstrap .pull-right и .pull-left для перемещения кнопок в правое и левое положение.

Вам нужно просто добавить класс и ваша кнопка готова в нужных местах. См. Приведенный ниже пример плавающих кнопок.

Как перемещать кнопку вправо и влево с помощью Bootstrap

В приведенном выше примере кнопки перемещаются вправо или влево.

Протестируйте вживую