Question

请原谅，这个问题很难解释，我很难找到解决方案。

我有一个项目列表，我想分成两列。我想保持列表项文本左对齐，以便您看到的星号在一个列中保持对齐，它们本身。但是，我希望列的两列列始终在视口中居中。此外，列表项包含可变长度的文本，因此使用bootstrap的文本中心会混淆它们并且不会保持li列的完整性。它实际上是什么，列表中的每个项目都是一个带有FontAwesome图标的链接。

实施例

目前，我的代码与此类似。

<ul class="col-xs-12">
  <li class="col-xs-6">*List Item</li>
  <li class="col-xs-6">*Some List Item</li>
  <li class="col-xs-6">*A List Item</li>
  <li class="col-xs-6">*One List Item</li>
  <li class="col-xs-6">*This List Item</li>
  <li class="col-xs-6">*Im A List Item</li>
</ul>

这与他们现在呈现的方式类似：

这就是我希望它们呈现的方式：

我还应该提一下，我希望它们保持流畅。我没有固定的宽度。

另外，我尝试过偏移列，但它似乎没有按照我想要的方式工作。我也尝试过使用CSS列：2我无法弄清楚如何使它们按照我想要的方式工作。我假设我将不得不为此编写一些js，但我想知道是否有人使用Bootstrap或CSS或两者兼而有之。

如果我的问题有任何问题，请原谅。这是我在Stack Overflow上的第一篇文章。

更新

到目前为止，最好看的解决方案，与我所寻求的最接近的是：

http://plnkr.co/edit/eo40fOMNVlRt9gBT4us4?p=preview

唯一的问题是，如果每个li> a具有不同的文本值（并且它们有，但我对它们有18个字符的限制），则每个左侧出现的FontIcons（星号）赢了水平对齐。但是，如果您查看该plunker，那么无论浏览器窗口大小如何，这些列表区域始终完全位于视口的一半中心。我很欣赏下面很多想法背后的想法，但即使我限制字符串值的长度，仍然可能存在bootstrap列太短而导致文本字符串溢出到小行的下一行的问题视口宽度。此外，将这些锁定到列中会迫使每个列在某个宽度处不会居中。

我想我可能是时候开始编写脚本了。请，任何其他想法表示赞赏。

Answer 1

尝试：

<ul class="col-xs-offset-2 col-xs-8">
<li class="col-xs-6">*List Item</li>
<li class="col-xs-6">*This List Item</li>
<li class="col-xs-6">*I Am List Item</li>
<li class="col-xs-6">*List Item</li>
<li class="col-xs-6">*A List Item</li>
<li class="col-xs-6">*Im An Item</li>
</ul>

http://plnkr.co/edit/Mh0IxzzdRE8ZmeX9gNWJ?p=preview

Answer 2

好吧，你可以为列使用bootstrap类，所以你有这样的东西：

<li class="col-xs-6"><div class="col-xs-3"></div><div class="col-xs-9">*List Item</div></li>
<li class="col-xs-6"><div class="col-xs-3"></div><div class="col-xs-9">*List Item Second</div></li>
<li class="col-xs-6"><div class="col-xs-3"></div><div class="col-xs-9">*List Item Third</div></li>
<li class="col-xs-6"><div class="col-xs-3"></div><div class="col-xs-9">*List Item Some other len</div></li>
<li class="col-xs-6"><div class="col-xs-3"></div><div class="col-xs-9">*List Item</div></li>
<li class="col-xs-6"><div class="col-xs-3"></div><div class="col-xs-9">*List Item</div></li>

我将每一个＆＃34; li＆＃34;在两个子列中：3和9.您可以根据需要进行更改，但保持它们的总和等于12（引导样式）。所以你设置你喜欢的东西：

<li class="col-xs-6"><div class="col-xs-4"></div><div class="col-xs-8">*List Item</div></li>
...

我做了一个可以尝试你喜欢的东西：PLUNKR

Answer 3

如果您可以删除旧浏览器支持，则可以使用纯css解决方案：

CSS3 Multiple Columns

ul {
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
  list-style-position: inside;
}

<ul>
  <li><a>Item 1</a></li>
  <li><a>Item 2</a></li>
  <li><a>Item 3</a></li>
  <li><a>Item 4</a></li>
  <li><a>Item 5</a></li>
  <li><a>Item 6</a></li>
  <li><a>Item 7</a></li>
  <li><a>Item 8</a></li>
  <li><a>Item 9</a></li>
  <li><a>Item 0</a></li>
  <li><a>Item 1</a></li>
  <li><a>Item 2</a></li>
  <li><a>Item 3</a></li>
  <li><a>Item 4</a></li>
</ul>

如何水平居中两列列表项（带或不带Bootstrap）？

3 个答案: