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执行此操作？

谢谢！

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 使行使用flexbox来布置其子项，这使您可以控制子项之间的空白分布方式。这将我们带到 flex-grow：1 ，它指示浏览器如果该项目位于flex父级中且该项目是否愿意增长，并且存在其他子级未自然声明的可用空间。我们在这里为所有孩子提供灵活成长和重要性＃34;一个（默认为零，不会增长），这意味着每个孩子将获得可用额外空白区域（如果有）的均匀分配。

如果您不希望子项自动使用所有可用空格，可以从中删除flex-grow属性并将以下内容添加到该行中：

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

justify-content：space-between 指示浏览器在子节点之间放置未使用的任何可用空格。这是看起来像：

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

如果这样可以解决您的问题，我真的建议您查看解释所有与Flexbox相关的属性及其功能的wonderful CSS Tricks article。

最后，请注意我没有为flexbox添加任何浏览器前缀，如果你实现这个，你应该这样做。 CSS Tricks有another nice article关于如何正确获取供应商前缀的信息，所以也可以看一下。

Answer 2

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

enter image description here

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

Answer 3

您需要查看bootstrap grid system，因为这正是它的用途。

根据您的标记，您可以执行以下操作：

<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列相等宽度的列。

使用Bootstrap水平布局内容

3 个答案:

DEMO：http://jsbin.com/vebiy/1/