Question

您使用bootstrap 4并想知道如何修复＆＃34;对齐内容＆＃34;属性如果有超过3个li元素它工作得很好但是如果有=＆lt; 3它没有任何提示？

内容在此

之内

<ul class="row center justify-content-around">

</ul>

实例：http://snowfox.sk/nnm/public/

Answer 1

下面使用d-flex和justify-content-around。

ul {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

li {
  width: 100px;
  background: blue;
  color: white;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<ul class="d-flex justify-content-around">
  <li>Flex</li>
  <li>Flex</li>
</ul>

Answer 2

只需将style="flex-grow: 1;"添加到ul

即可

或

像这样更改您的代码（查看整页）

移除宽度width: 20rem;并将col-4添加到li

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row text-center">
<ul class="row center justify-content-around">
<li class="col-lg-4">
<div class="card card-edited" style="">
<span class="badge badge-dark card-lang">SK</span>
<img class="card-img-top img-responsive" src="http://snowfox.sk/nnm/public/img/anime/12675B.jpg" alt="Obŕazok neexistuje" height="350">
<div class="card-body">
<h4 class="card-title" style="overflow-y: hidden;">Natsume Yuujinchou</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-outline-success"><span class="fa fa-play"> Pozrieť preklad</span></a>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">
 <a href=""><span class="fa fa-download"></span> Google</a> |
<a href=""><span class="fa fa-download"></span> Mega.co.nz</a> |
<a href=""><span class="fa fa-download"></span> Ulož.to</a>
</li>
<li class="list-group-item">
 <a href=""><span class="fa fa-download"></span> Google</a> |
<a href=""><span class="fa fa-download"></span> Mega.co.nz</a> |
<a href=""><span class="fa fa-download"></span> Ulož.to</a>
</li>
</ul>
<div class="card-footer text-muted">
2 days ago
</div>
</div>
</li>
<li class="col-lg-4">
<div class="card card-edited" style="">
<span class="badge badge-dark card-lang">SK</span>
<img class="card-img-top img-responsive" src="http://snowfox.sk/nnm/public/img/anime/12675B.jpg" alt="Obŕazok neexistuje" height="350">
<div class="card-body">
<h4 class="card-title" style="overflow-y: hidden;">Natsume Yuujinchou</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-outline-success"><span class="fa fa-play"> Pozrieť preklad</span></a>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">
 <a href=""><span class="fa fa-download"></span> Google</a> |
<a href=""><span class="fa fa-download"></span> Mega.co.nz</a> |
<a href=""><span class="fa fa-download"></span> Ulož.to</a>
</li>
<li class="list-group-item">
 <a href=""><span class="fa fa-download"></span> Google</a> |
<a href=""><span class="fa fa-download"></span> Mega.co.nz</a> |
<a href=""><span class="fa fa-download"></span> Ulož.to</a>
</li>
</ul>
<div class="card-footer text-muted">
2 days ago
</div>
</div>
</li>
<li class="col-lg-4">
<div class="card card-edited" style="">
<span class="badge badge-dark card-lang">SK</span>
<img class="card-img-top img-responsive" src="http://snowfox.sk/nnm/public/img/anime/12675B.jpg" alt="Obŕazok neexistuje" height="350">
<div class="card-body">
<h4 class="card-title" style="overflow-y: hidden;">Natsume Yuujinchou</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-outline-success"><span class="fa fa-play"> Pozrieť preklad</span></a>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">
 <a href=""><span class="fa fa-download"></span> Google</a> |
<a href=""><span class="fa fa-download"></span> Mega.co.nz</a> |
<a href=""><span class="fa fa-download"></span> Ulož.to</a>
</li>
<li class="list-group-item">
 <a href=""><span class="fa fa-download"></span> Google</a> |
<a href=""><span class="fa fa-download"></span> Mega.co.nz</a> |
<a href=""><span class="fa fa-download"></span> Ulož.to</a>
</li>
</ul>
<div class="card-footer text-muted">
2 days ago
</div>
</div>
</li>
</ul>
</div>
</div>

＆＃13;

Answer 3

如果将列表包装在一列中，您将获得所需的结果：

<div class="col">
  <ul class="row center justify-content-around">
    <li>...</li>
    <li>...</li>
    <li>...</li>
  </ul>
</div>

Bootstrap 4 - 在ul元素内对齐内容

3 个答案: