Выравнивание вправо

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

<html> 
<head> 
</head> 
    <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"> 
    <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>

Код в here

источник

2017-01-27 jecabeda

Bootstrap 4 uses .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>

источник

2017-01-27 13:18:42

-3

Может быть, вы можете использовать поплавок: право;:

.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>

источник

2017-01-27 13:18:24 Alex

-2

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

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

1) Reverse для начальной загрузки 3.3.7

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

источник

2017-01-27 13:20:04

слишком быстро с судейством. В Bootstrap 4 есть поля с плавающей запятой (float-left) вместо pull-right (pull-left). Сожалею. –

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

Гнездо три колонки внутри строки, у вас есть текст и кнопка внутри. Установите два в класс = «Col-см-1» и внутренний столбец класса = «Col-см-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>

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

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

источник

2017-01-27 13:26:27 Afterfield

<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 не является Flexbox способом Bootstraph 4 в выравнивания вещи.

источник

2017-03-31 17:37:16 Killerpixler

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

<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>

источник

2017-10-31 17:24:39 josemmo

ответ

Смежные вопросы