我有dl列表,但是我需要使其不是垂直的,而是水平的,并且只需要一个dl列表即可。我正在使用bootstrap 4,所以也许可以用flexbox完成吗?
HTML:
<footer class="footer">
<div class="footer-top">
<div class="container">
<div class="row text-center">
<dl class="footer-top-list">
<dt class="footer-top-termin col-md-4">Location</dt>
<dd class="col-md-4">3481 Melrose Place</dd>
<dd class="col-md-4">Beverly Hills, CA 90210</dd>
<dt class="footer-top-termin col-md-4">Share with love</dt>
<dd class="col-md-4">
<ul class="list-inline">
<li class="list-inline-item">
<a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
</li>
<li class="list-inline-item">
<a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>
</li>
<li class="list-inline-item">
<a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
</li>
</ul>
</dd>
<dt class="footer-top-termin col-md-4">About</dt>
<dd class="col-md-4">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ullamcorper nulla non metus
auctor fringilla.
</dd>
</dl>
</div>
</div>
</div>
<div class="footer-bottom">
</div>
</footer>
现在我将所有dt和dd都垂直放置,但是我需要使它看起来像这样:
我该怎么做?
最佳答案
通过将成对的dts
和dd
包裹在div
中,可以使用引导程序类将这些组组织为列。
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<footer class="footer">
<div class="footer-top">
<div class="container">
<div class="text-center">
<dl class="row footer-top-list">
<div class="col-md-4">
<dt class="footer-top-termin col-md-4">Location</dt>
<dd class="col-md-4">3481 Melrose Place</dd>
<dd class="col-md-4">Beverly Hills, CA 90210</dd>
</div>
<div class="col-md-4">
<dt class="footer-top-termin col-md-4">Share with love</dt>
<dd class="col-md-4">
<ul class="list-inline">
<li class="list-inline-item">
<a href="#">
<i class="fa fa-facebook" aria-hidden="true"></i>
</a>
</li>
<li class="list-inline-item">
<a href="#">
<i class="fa fa-twitter" aria-hidden="true"></i>
</a>
</li>
<li class="list-inline-item">
<a href="#">
<i class="fa fa-linkedin" aria-hidden="true"></i>
</a>
</li>
</ul>
</dd>
</div>
<div class="col-md-4">
<dt class="footer-top-termin col-md-4">About</dt>
<dd class="col-md-4">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ullamcorper nulla non metus auctor fringilla.
</dd>
</div>
</dl>
</div>
</div>
</div>
<div class="footer-bottom">
</div>
</footer>
注意:整页中的vue片段可触发
md
断点。