Question

我正在使用Bootstrap 3.0，我需要一行包含三个元素。我希望一个固定在中心，另外两个固定在左侧和右侧。以下代码显示了我的内容。这有效，但它有三行。

 <div class="row-centered">
  <span class="text-left">text</span>
  <div class="center-block" style="width:200px;background-color:#ccc;">...</div>
  <div class="text-right">text</div>
</div>

Answer 1

您可以使用<div class="row">和<div class="col-sm-4">（其中“col-sm-4”可与“col-sm-3”，“col-md-4”等类互换）将元素串联放在同一行 - here's a JSFiddle。

<div class="row">
  <div class="col-xs-4 text-right">text</div>
  <div class="col-xs-4" style="background-color:#ccc;">...</div>
  <div class="col-xs-4 text-left">text</div>
</div>

Answer 2

尝试使用传统行并利用Bootstrap Grid。静态宽度是一个坏主意，但如果你具体告诉我你要达到的宽度，我们可以更好地适应柱尺寸。

<div class="row">
<div class="col-xs-4 text-left">text</div>
<div class="col-xs-4 text-center" style="background-color:#CCC;">...</div>
<div class="col-xs-4 text-right">text</div>
</div>

Bootstrap行中的中心元素，每侧有两个元素

2 个答案: