Question

如果我使用<div>并class="row"附上并按下每个按钮class="span4"，则按钮会填充屏幕的总宽度。

我希望每个按钮的宽度与其中包含的文本一样宽，中心位于25%的{{1}}，50%和75%。< / p>

width

不

             [aaa]                        [bbb]                     [ccc]

我是bootstrap的新手，而不是CSS专家。

我如何实现这一目标？

我的按钮也有[ aaa ][ bbbb ][ cccc ]，但这不会影响事情（我认为）。

顺便说一句，我目前正在考虑3个按钮，但如果任何数字的通用解决方案同样容易，那将是受欢迎的。

Answer 1

首先从你的课程中看来你仍然在使用bootstrap-v2，尝试使用bootstrap-v3（v4仍然在 ~~alpha~~ beta [now]阶段），以及你可以用这个来实现你想要的目标：

＆＃13;

.row {
  border: 1px dashed red /* demo */
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row text-center">
    <div class="col-xs-4">
      <button type="button" class="btn btn-default">Left</button>
    </div>
    <div class="col-xs-4">
      <button type="button" class="btn btn-default">Middle</button>
    </div>
    <div class="col-xs-4">
      <button type="button" class="btn btn-default">Right</button>
    </div>
  </div>
</div>

＆＃13;

更新（bootstrap-v4）

对于那些正在使用/想要使用bootstrap V4的用户，请按以下步骤操作：

＆＃13;

.row {
  border: 1px dashed red /* demo */
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row text-center">
    <div class="col-4">
      <button type="button" class="btn btn-default">Left</button>
    </div>
    <div class="col-4">
      <button type="button" class="btn btn-default">Middle</button>
    </div>
    <div class="col-4">
      <button type="button" class="btn btn-default">Right</button>
    </div>
  </div>
</div>

＆＃13;

Answer 2

尝试将div与class="row"和div与class="span4 text-center"一起使用，并在每个button中加上remote

Answer 3

引导方式是

.col-md-3 {
  text-align: center;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
  <div class="col-sm-4"><button class="btn-outline btn-default">text</button></div>
  <div class="col-sm-4"><button class="btn-outline btn-default">text</button></div>
  <div class="col-sm-4"><button class="btn-outline btn-default">text</button></div>
</div>
</div>

或使用普通的CSS和flexbox

来做

.row {
  display: flex;
}
.col-md-4 {
  flex-grow: 1;
  text-align: center;
}

<div class="container">
  <div class="row">
    <div class="col-md-4"><button class="btn-outline btn-default">text</button></div>
    <div class="col-md-4"><button class="btn-outline btn-default">text</button></div>
    <div class="col-md-4"><button class="btn-outline btn-default">text</button></div>
  </div>
</div>

如何使用bootstrap 3均匀分隔三个水平对齐的按钮？

3 个答案:

更新（bootstrap-v4）