Question

我有一个使用Bootstrap的网络应用。在这个Web应用程序中，我有一个动态创建的项目列表。此处显示了创建的项目的示例：

<ul class="list-inline">
  <li>home</li>
  <li>contact me</li>
  </li>a longer list item</li>
</ul>

当渲染它时，它是这样的：

+------------------------------------------------+
| +------+------------+--------------------+     |
| | home | contact me | a longer list item |     |
| +------+------------+--------------------+     |
+------------------------------------------------+

但是，我想找出一种方法让项目填满屏幕的宽度并均匀分布。换句话说，我有点想要这样：

+-----------------------------------------------------------------------------------+
| +--------------------------+--------------------------+--------------------------+     |
| |           home           |        contact me        |    a longer list item    |     |
| +--------------------------+--------------------------+--------------------------+     |
+-----------------------------------------------------------------------------------+

在上面的示例中，每个项目的宽度相同，文本在每个单元格中居中。我如何在Bootstrap中执行此操作？

谢谢！

Answer 1

您可以使用display: flex

.list-inline {
  display: flex;
}

.list-inline li {
  flex: 1;

  text-align: center;
}

Answer 2

您可以使用我所推荐的Dan回答的Flexbox，但如果您正在寻找<=IE9 support，则可以使用table布局。

* {
  margin: 0;
  padding: 0;
}
.list-inline {
  display: table;
  width: 100%;
  table-layout: fixed;
}
.list-inline li {
  display: table-cell;
  text-align: center;
}

<ul class="list-inline">
  <li>home</li>
  <li>contact me</li>
  <li>a longer list item</li>
</ul>

通过CSS均匀划分剩余空间的水平列表

2 个答案: