使用Bootstrap水平布局内容

Question

我正在使用Bootstrap应用程序排版内容。我的内容是按行排列的。目前，我有以下内容：

<div>
  <span class="badge">{{rowNumber}}</span>
  <a ng-repeat="item in items" style="display: inline-block; margin:4px padding:0px 8px;">
    {{item.name}}
  </a>
</div>

如果我的集合有4个项目，这些项目会横向排列，靠左对齐。我需要能够使这些项目均匀地布置在可用空间的整个宽度上。

我该如何使用CSS / Bootstrap来实现？

谢谢！

- JQuery Mobile

---

使用flexbox吗？：http://css-tricks.com/snippets/css/a-guide-to-flexbox/ - cvrebert

Answer 1

我认为你可以使用Flexbox来实现你想要的效果。如果我正确理解了你的问题，你想要做的是让每一行动态地将可用空间均匀地分配给其子元素。如果一行有两个子元素（徽章+一个项目），每个子元素应该有50%的可用空间，但如果有10个子元素（徽章+九个项目），每个子元素只应该有10%的可用空间。这个jsfiddle向你展示了如何使用flexbox来完成这个任务：

http://jsfiddle.net/renwfee1/2/

这是结构：

<div class="a_row">
    <span class="badge">rowNumber 0</span>
    <div class="item">item 0</div>
    <div class="item">item 1</div>
    ...
    <div class="item">item n</div>
</div>

重要的 CSS 部分是：

.a_row {
    display: flex;
    ...
}

.item {
    text-align: center;
    flex-grow: 1;
}

“display: flex” 使行使用弹性盒子来布置其子元素，这样您就可以控制空白如何在子元素之间分配。这将带我们进入“flex-grow: 1”，它告诉浏览器，如果该项在弹性父级中并且存在其他未被其他子元素自然占用的可用空间，则该项愿意增长。我们在此将所有子项的 flex-grow “重要性”设置为一（默认为零，不增长），这意味着每个子项将获得可用额外空白空间的平均份额（如果有的话）。

如果您不希望子元素自动使用所有可用的空白空间，您可以从它们中删除 flex-grow 属性，并将以下内容添加到行中：

.a_row {
    display: flex;
    justify-content: space-between;
    ...
}

"justify-content: space-between" 指示浏览器在子元素之间放置任何可用的未被子元素使用的空白。这是它的外观：

http://jsfiddle.net/0unpfm5j/1/

如果这个解决了你的问题，我真的鼓励你去看一下wonderful CSS Tricks article，它解释了所有与 flexbox 相关的属性以及它们的作用。

最后，请注意我没有包含任何浏览器前缀的 flexbox，如果你要在实际项目中使用，你应该加上。CSS Tricks 还有另一篇不错的文章，介绍如何正确使用厂商前缀，所以也可以看一下那里。

- Johan Persson

---

今天早些时候，有一个非常好的关于flexbox的答案，给了+1。将其复制到某个地方以便再次使用。 - Christina

Answer 2

我之前已经回答过这个问题，但你没有写完整的问题。你的评论提到了一个固定宽度的第一个元素，其余内容均匀地占用剩余空间。

演示：http://jsbin.com/vebiy/1/

http://jsbin.com/vebiy/1/edit?html,css,output

CSS

.container-app .row {
   display:table;
   width:100%;
   margin:0;
}
.row > div {
    text-align: center;
    vertical-align: middle;
    display:table-cell;
    border-top:1px solid #ddd;
    padding:5px;
}
.container-app .row .badge {
    padding: 10px;
    width:100%;
}
.container-app .row div:first-child  {
    width: 150px;
    background:yellow;
    white-space:nowrap;
    position:relative;
}
.container-app .row div:first-child:before {
    content:'';
    width: 150px;
    display:block;
    height: 1px;
    white-space:nowrap;
}

.overflow-div {
    overflow:auto;
    -webkit-overflow-scrolling:touch;
    -ms-overflow-style:-ms-autohiding-scrollbar
}

HTML是一种编程语言，用于创建网页。

<div class="container-app">
   <div class="overflow-div">
      <div class="row">
            <div>first fixed width</div>
            <div><span class="badge">Badge</span></div>
            <div><span class="badge">Badge</span></div>
      </div>
      <div class="row">
            <div>first fixed width</div>
            <div><span class="badge">Badge</span></div>
            <div><span class="badge">Badge</span></div>
            <div><span class="badge">Badge</span></div>
            <div><span class="badge">Badge</span></div>
            <div><span class="badge">Badge</span></div>
            <div><span class="badge">Badge</span></div>
      </div>
      <div class="row">
            <div>first fixed width</div>
            <div><span class="badge">Badge</span></div>
      </div>
      <div class="row">
            <div>first fixed width</div>
            <div><span class="badge">Badge</span></div>
            <div><span class="badge">Badge</span></div>
            <div><span class="badge">Badge</span></div>
      </div>
      <div class="row">
            <div>first fixed width</div>
            <div><span class="badge">Badge</span></div>
            <div><span class="badge">Badge</span></div>
      </div>
      <div class="row">
            <div>first fixed width</div>
            <div><span class="badge">Badge</span></div>
            <div><span class="badge">Badge</span></div>
            <div><span class="badge">Badge</span></div>
            <div><span class="badge">Badge</span></div>
            <div><span class="badge">Badge</span></div>
            <div><span class="badge">Badge</span></div>
      </div>
      <div class="row">
            <div>first fixed width</div>
            <div><span class="badge">Badge</span></div>
      </div>
      <div class="row">
            <div>first fixed width</div>
            <div><span class="badge">Badge</span></div>
            <div><span class="badge">Badge</span></div>
            <div><span class="badge">Badge</span></div>
      </div>
   </div>
</div>

- Christina

---

如果您要使用表格进行布局，请添加role="presentation"。 - steveax

我想出了一种更好的方法。 - Christina

自从大约04年以来，我实际上没有使用过表格，所以那感觉很奇怪。 - Christina

Answer 3

你需要了解Bootstrap网格系统，因为这正是它的用途。

根据你的标记，你可以做如下操作：

<div>
  <span class="badge">{{rowNumber}}</span>
  <div class="row">
    <a ng-repeat="item in items" class="col-xs-3">
      {{item.name}}
    </a>
  </div>
</div>

我在你的链接中添加了col-xs-3类，这意味着每个a将使用12列网格中的3列。由于3除以12等于4，因此我们最终将得到4个等宽列。

- Steve Sanders

---

我的挑战是，项目的数量是可变的。因此，我不认为我可以只使用列。还有其他办法吗？ - JQuery Mobile

你想让它在任意列数下均匀显示吗？所以如果你有10个项目，它将在一行中有10列，8个项目将在一行中有8列等等？或者它可以分成多行显示吗？ - Steve Sanders

正确。所有内容都将在单行中显示。我不需要（也不想要）跨越多行。 - JQuery Mobile