Question

我有以下演示代码可用于列出链接列表：

<BaseURL>/Api/Incident/GetAffectedCIs?id=XXXX

您可以在此codeply

中查看结果

当屏幕较小时，所有列均位于该空间的中心。但是，当屏幕较大时，我希望列之间有更多空间。因此，我正在使用Bootstrap实用程序类，将列设置为col-md-2。

问题是我希望文本在列表中（它是）左对齐，并且列表本身在每一列的中心，以便整个行的内容在页面上居中。

当前，每个列表在每一列中都对齐。

与已经提出该问题的评论相反，它在此特定上下文中没有提出。我要问的是将垂直列表居中对齐，而不是水平对齐列表。

我不是在问如何仅使列表水平对齐，而是要如何使内容居中并在列表中居中，同时使每个列表中的文本保持对齐。

Answer 1

尝试使用d-flex bootstrap（4.3.1）类满足您的要求： https://getbootstrap.com/docs/4.0/utilities/flex/

  <div class="container-fluid">
  <div class="row d-flex justify-content-start">
     <div class="col-auto col-md-3">
         <ul class="list-unstyled">
             <li>First List Item</li>
             <li>Second list item</li>
         </ul>
    </div>   
    <div class="col-auto col-md-3">
          <ul class="list-unstyled">
             <li>First List Item</li>
             <li>Second list item</li>
          </ul>
    </div>
     <div class="col-auto col-md-3">
         <img src="http://placekitten.com/g/200/300" >
    </div>   
   </div>
 </div>

如果这不是您的要求，请告诉我！

Answer 2

已添加

ul{
  margin-left: 50%;
    transform: translateX(-50%);
}

。这就是你想要的吗？检查以下链接 https://codepen.io/Xenio/pen/yrYVMM

ul{
  margin-left: 50%;
    transform: translateX(-50%);
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="container-fluid">
      <div class="row justify-content-center">
         <div class="col-auto col-md-4">
             <ul class="list-unstyled">
                 <li>First List Item</li>
                 <li>Second list item</li>
             </ul>
        </div>   
        <div class="col-auto col-md-4">
              <ul class="list-unstyled">
                 <li>First List Item</li>
                 <li>Second list item</li>
              </ul>
        </div>
         <div class="col-auto col-md-4">
             <img src="http://placekitten.com/g/200/300" >
        </div>   
       </div>
     </div>

Answer 3

我找到了一种使用Bootstrap 4 flex实用程序类的方法，如下所示：

<div class="container-fluid">
  <div class="row justify-content-center">
     <div class="col-auto col-md-3 d-flex justify-content-center">
         <ul class="list-unstyled">
             <li>First List Item</li>
             <li>Second list item</li>
         </ul>
    </div>   
    <div class="col-auto col-md-3 d-flex justify-content-center">
          <ul class="list-unstyled">
             <li>First List Item</li>
             <li>Second list item</li>
          </ul>
    </div>
     <div class="col-auto col-md-3 d-flex justify-content-center">
         <img src="http://placekitten.com/g/200/300" >
    </div>   
   </div>
 </div>

这里是codelpy

底部的Bootstrap 4 Center列表和列表中的左对齐文本

3 个答案: