对齐UL子弹引导程序

Question

我有一个清单：

<div class="row">
  <div class="col-md-12">
    <ul class="text-center" style="list-style-position: inside; vertical-align: middle;">
      <li>1234</li>
      <li>123456789123</li>
      <li>123456789123</li>
    </ul>
  </div>
</div>

输出：

即使li元素的长度不同，如何保持列表居中，如何使子弹点对齐？

这是Bootply。

Answer 1

您需要像这样制作UL内联块：

<div class="row">
    <div class="col-md-12 text-center">
      <ul class="text-left" style="display:inline-block;vertical-align:middle;">
        <li>1234</li>
        <li>123456789123</li>
        <li>123456789123</li>
      </ul>
    </div>
</div>

http://www.bootply.com/XFzwCr74vu

Answer 2

您只需删除课程文本中心。

Bootply

<div class="row">
  <div class="col-md-12">
    <ul style="list-style-position: inside; vertical-align: middle;">
      <li>1234</li>
      <li>123456789123</li>
      <li>123456789123</li>
    </ul>
  </div>
</div>

Answer 3

您可以使用bootstrap offset class

＆＃13;

＆＃13;

<div class="row">
  <div class="col-md-2 col-md-offset-5">
    <ul style="list-style-position: inside; vertical-align: middle;">
      <li>1234</li>
      <li>123456789123</li>
      <li>123456789123</li>
    </ul>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Bootply

Answer 4

试试这个

 <div class="row">
  <div class="col-md-7 col-md-offset-5">
    <ul class="text-center" style="list-style-position: inside; vertical-align: middle;text-align:left">
      <li>1234</li>
      <li>123456789123</li>
      <li>123456789123</li>
    </ul>
  </div>
</div>