0
こんにちは、ブートストラップ4を使用しています.3つ以上の要素がある場合は "justify-content-around"プロパティを修正する方法を知りたいと思っていましたが、もしあれば= <何かヒントはありませんか？ d-flexとjustify-content-aroundを使用して以下http://snowfox.sk/nnm/public/ブートストラップ4 - ul要素内の内容を妥当化する
A
答えて
1
は単にstyle="flex-grow: 1;"
または
ulに変更を加えますこのようなあなたのコード（フルページでご確認ください）
は幅width: 20rem;を削除し、col-4からli
<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>
0
：
内容は、この
<ul class="row center justify-content-around">
</ul>
ライブの例の中にあります。
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>
0
あなたが列にあなたのリストをラップする場合は、あなたが望む結果になります。
<div class="col">
<ul class="row center justify-content-around">
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</div>
D-フレックス代わりにセンターの使用クラスhttps://getbootstrap.comを追加します/docs/4.0/utilities/flex/#justify-content – Gerard
センターは私のカスタムクラスです。マージンを自動入力します –
とd-flex doesnt worksは今すぐ試しました –