對齊UL Bullets Bootstrap

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

您只需刪除類text-center。

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

您可以使用引導偏移量類

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

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>