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

Question

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

Когда я пытаюсь достичь этого с помощью Bootstrap, мне не нужно ничего найти относительно моей потребности. Это происходит потому, что каждый раз, когда я пытаюсь обернуть <div> тег вокруг входных элементов, то HTML документ будет показывать их на отдельно строк:

.foo { 
 
    width: 23%; 
 
    /*Should be the width required by the button, 
 
    but I just took a random number that fits 
 
    best. */ 
 
    margin: 0 auto; 
 
} 
 
/*This is how it should look like, however 
 
I want to make use of Bootstrap instead of custom positon css if 
 
possible. */ 
 

 
.desired { 
 
    position: absolute; 
 
    left: 10%; 
 
} 
 
.desired div { 
 
    width: 10%; 
 
    text-align: center; 
 
    display: inline-block; 
 
} 
 
.example2 { 
 
    /*Center second element*/ 
 
    position: absolute; 
 
    left: 50%; 
 
    margin-left: -5%; 
 
} 
 
.example3 { 
 
    position: absolute; 
 
    right: 0%; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />I tried using the following HTML/CSS: 
 
<!--What I tried doing using Bootstrap: --> 
 
<div class="container"> 
 
    <input type="submit" class="btn btn-default" value="Foo"> 
 
    <input type="submit" class="btn btn-default" value="Test"> 
 
    <input type="submit" class="btn btn-default pull-right" value="Bar"> 
 
</div> 
 

 
<br>And got to a result that looks something like this: 
 
<div class="container"> 
 
    <input type="submit" class="btn btn-default" value="Foo"> 
 
    <div class="foo"> 
 
    <input type="submit" class="btn btn-default" value="Test"> 
 
    </div> 
 
    <input type="submit" class="btn btn-default pull-right" value="Bar"> 
 
</div> 
 

 
<br>And this: 
 
<div class="container"> 
 
    <input type="submit" class="btn btn-default" value="Foo"> 
 
    <div class="text-center"> 
 
    <input type="submit" class="btn btn-default" value="Test"> 
 
    </div> 
 
    <input type="submit" class="btn btn-default pull-right" value="Bar"> 
 
</div> 
 

 
<br> 
 

 
<!-- What it looks like I want to achieve --> 
 
I want the elements to look similar to: 
 
<div class="container desired"> 
 
    <div class="example1"> 
 
    <input type="submit" class="btn btn-default" value="Foo"> 
 
    </div> 
 
    <div class="example2"> 
 
    <input type="submit" class="btn btn-default" value="Test"> 
 
    </div> 
 
    <div class="example3"> 
 
    <input type="submit" class="btn btn-default" value="Bar"> 
 
    </div> 
 
</div> 
 

 
<!-- Is it possible to align buttons with the use of Bootstrap classes? -->

Если этот фрагмент не показывает хорошо, это связано для позиционирования в процентах, поэтому попробуйте просмотреть его на полной странице, если это необходимо.

Итак, мой вопрос: возможно ли использовать Bootstrap для выравнивания кнопок внутри документа, даже если я хочу, чтобы они были помещены на одну и ту же горизонтальную линию (или строку)?

Заранее спасибо.

Answer 1

очень простой просто следуйте ниже.

с помощью начального загрузки

• поместить все 3 кнопки в том же сНе или контейнер.
• добавить класс «text-center» в родительском div или контейнере всех 3 кнопок
• добавить «pull-left» class к первой кнопке.
• добавьте класс «pull-right» в третью кнопку.

с помощью пользовательского CSS

• поставить все 3 кнопки в одном родительских делах.
• дать, что родительский Див css- .parent-div { text-align:center;}
• дают первую кнопку css- .first_btn { display:inline-block; float:left;}
• дают третью кнопку css- .third_btn { display:inline-block; float:right;}
• дают вторую кнопку css- .second_btn { display:inline-block; float:none;}

Answer 2

Вы можете достичь без position таким образом:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container-fluid"> 
 
    <div class="row"> 
 
    <div class="col-xs-4"> 
 
     <button class="btn btn-default">Button</button> 
 
    </div> 
 
    <div class="col-xs-4 text-center"> 
 
     <button class="btn btn-default">Button</button> 
 
    </div> 
 
    <div class="col-xs-4 text-right"> 
 
     <button class="btn btn-default">Button</button> 
 
    </div> 
 
    </div> 
 
</div>