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

非常简单，只需遵循以下步骤。

使用bootstrap

将所有3个按钮放在同一个div或容器中。
添加＆＃34;文字中心＆＃34;父div中的类或所有3个按钮的容器
添加＆＃34;左拉＆＃34;类到第一个按钮。
添加＆＃34;右拉＆＃34;上课到第三个按钮。

使用自定义CSS

将所有3个按钮放在同一个父div中。
给父母div 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的情况下实现此目的：

＆＃13;

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

＆＃13;

对齐Bootstrap中的按钮

2 个答案: