我有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>
我怎么能这样做?
答案 0 :(得分:1)
通过在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
断点。
答案 1 :(得分:0)
为什么不在课程div
上使用col-md-4
?像这样:
<footer class="footer">
<div class="footer-top">
<div class="container">
<div class="row text-center">
<div class="col-md-4">
<strong>Location</strong><br>
3481 Melrose Place<br>
Beverly Hills, CA 90210
</div>
<div class="col-md-4">
<strong>Share with love</strong><br>
</div>
<div class="col-md-4">
<strong>About</strong><br>
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ullamcorper nulla non metus
auctor fringilla.
</div>
</div>
</div>
</div>
<div class="footer-bottom">
</div>
</footer>