Bootstrap 4 float-right внутри.row

Я новичок в Bootstrap 4 и, похоже, не получаю float-right на div div, работающем в строке. Вот мой код:

<div class="row" >
<div class="col-md-8 float-right" style="border: 1px solid red;">
<h3>Five grid tiers</h3>
<p>Hi</p>

</div>
</div>

Странно, что он отлично работает без строки в качестве родительского div, но я бы хотел использовать строку. Я что-то упускаю?

Благодаря :)

Ответ 1

Bootstrap 4 включает Flexbox для своих макетов. Вы можете получить желаемый результат, добавив класс 'justify-content-end' в родительский контейнер.

<div class="row justify-content-end" >
  <div class="col-md-8" style="border: 1px solid red;">
    <h3>Five grid tiers</h3>
    <p>Hi</p>
  </div>
</div>

Ответ 2

row - это flex-контейнер в bootstrap-4, для выравнивания содержимого в flex-container вам нужно использовать ml-auto и mr-auto.

Вот пример:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<div class="row ml-1">
  <div>
     Hello from left
  </div>
  <div class="ml-auto mr-3">
     Hello from right
  </div>
</div>

Ответ 3

Если все, что вы хотите, это "потянуть" столбец вправо, вы можете использовать "смещение". Поскольку вы используете col-md-8, добавьте offset-md-4.

<div class="row">
  <div class="col-md-8 offset-md-4" style="border: 1px solid red;">
    <h3>Five grid tiers</h3>
    <p>Hi</p>

  </div>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">

Ответ 4

Что вы могли бы попробовать:

<div class="row float-right">
    <div class="col-md-8 float-right" style="border: 1px solid red;">
        <h3>Five grid tiers</h3>
        <p>Hi</p>
    </div>
</div>

Если вы используете bootstrap 3, вам придется использовать pull-right вместо float-right.

Ответ 5

Сорен прав. В Bootstrap 4 используется гибкая коробка. Поплавки застряли! Попытайтесь забыть их!

<div class="row justify-content-end">
  <div class="col-4"> One of two columns </div>
  <div class="col-4"> One of two columns </div>
</div>

Pull-right - это тег bootstrap 3.

Ответ 6

В соответствии с документацией по загрузке вы должны использовать класс ml-auto на кольце, которое вы хотите поместить справа.

Таким образом (посмотрите на пример) вы можете получить только тот элемент, который вам нужен, справа, тогда как все остальные столбцы все еще будут в естественном потоке (слева).

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>


<div class="container">
  <div class="row">
    <div class="col-3 border border-primary">
      One 
    </div>
    <div class="col-3 border border-primary">
      Two
    </div>
    <div class="col-3 border border-success ml-auto">
      Three
    </div>
  </div>
</div>

Ответ 7

Для страниц cshtml с начальной загрузкой используйте ниже

@Html.ActionLink("Назад", "Индекс", "Контроллер", null, new {@class= "btn btn-warning"}) @Html.ActionLink("Создать новый", "Создать", "Контроллер", null, new {@class= "btn btn-primary"})

Ответ 8

Bootstrap 4 использует flexbox. Вы можете исправить это, заменив "justify-content-end" вместо "float-right".

<div class="row" >
    <div class="col-md-8 justify-content-end" style="border: 1px solid red;">
      <h3>Five grid tiers</h3>
      <p>Hi</p>    
    </div>
</div>