Кнопка выравнивания вправо

Я знаю, что это должно быть очень просто, но я пытаюсь установить кнопку справа от окна, используя только bootstrap 4 класса. Он должен быть в той же строке, что и текст.

<html>
<head>
</head>
    <link rel="stylesheet" href="#" onclick="location.href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'; return false;" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
    <body>
        <div class="row">
            <h3 class="one">Text</h3>
            <button class="btn btn-secondary pull-right">Button</button>
        </div>
    </body>
</html>

Код находится в здесь

Ответы

Ответ 1

Bootstrap 4 использует .float-right в отличие от .pull-right в Bootstrap 3. Кроме того, не забудьте правильно вложить ваши строки в столбцы.

<div class="row">
    <div class="col-lg-12">
        <h3 class="one">Text</h3>
        <button class="btn btn-secondary float-right">Button</button>
    </div>
</div>

Ответ 2

<div class="container-fluid">
  <div class="row">
    <h3 class="one">Text</h3>
    <button class="btn btn-secondary ml-auto">Button</button>
  </div>
</div>

.ml-auto является способом Bootstraph 4 non flexbox выравнивания объектов.

Ответ 3

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

Вставьте три столбца внутри строки, у вас есть текст и кнопка внутри. Установите два символа class= "col-sm-1", а внутренний столбец - class= "col-sm-10"

<div class="row">
     <div class="col-sm-1"><h3 class="one">Text</h3></div>
     <div class="col-sm-10"></div>
     <div class="col-sm-1"><button class="btn btn-secondary pull-right">Button</button></div>
</div>

Это далеко не лучший способ добиться того, чего вы хотите достичь, но он работает (если размер экрана не станет слишком маленьким). Сетка отлично подходит для структурирования вашей веб-страницы.

В идеале вы должны написать свой собственный CSS, чтобы навести кнопку справа от страницы. Но этот метод будет работать, если вы не хотите этого делать.

Ответ 4

Если вы не хотите использовать float, самый простой и чистый способ сделать это - использовать столбец автоматической ширины:

<div class="row">
  <div class="col">
    <h3 class="one">Text</h3>
  </div>
  <div class="col-auto">
    <button class="btn btn-secondary pull-right">Button</button>
  </div>
</div>

Ответ 5

Возможно, вы можете использовать float: right;:

.one {
  padding-left: 1em;
  text-color: white;
   display:inline; 
}
.two {
  background-color: #00ffff;
}
.pull-right{
  float:right;
}

<html>
<head>
 
  </head>
  <body>
      <div class="row">
       <h3 class="one">Text</h3>
       <button class="btn btn-secondary pull-right">Button</button>
    </div>
  </body>
</html>

Ответ 6

Файл bootstrap 4.0.0, который вы получаете из cdn, не имеет класса pull-right (или pull-left). V4 находится в альфа, поэтому есть много таких проблем.

Есть 2 варианта:

1) Обратный к бутстрапу 3.3.7

2) Напишите свой собственный CSS.