Sao*_*awy 1 html css bootstrap-4
如何将所有内容对齐divs在同一条线上。我的意思是我希望按钮像这样的图像一样以文本居中,例如,社交图标像文本一样居中,而不是像我在黑暗中那样向下
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<footer id="main-footer" class="bg-dark">
<div class="container d-flex flex-sm-column justify-content-between py-3">
<div class="row py-4 text-center align-content-between flex-wrap">
<div class="col-lg-4 mb-3">
<p class="text-secondary">Copyright © Saud</p>
</div>
<div class="col-lg-4 mb-3 ">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary " data-toggle="modal" data-target="#exampleModal">
Contact Us
</button>
</div>
<div class="col-lg-4 mb-3">
<ul class="list-inline quicklinks">
<li class="list-inline-item">
<a href="#">Privacy Policy</a>
</li>
<li class="list-inline-item">
<a href="#">Terms of Use</a>
</li>
</ul>
</div>
</div>
</div>
</footer>Run Code Online (Sandbox Code Playgroud)
要将它们居中对齐,请制作列d-flex并使用align-items-center...
<div class="row text-center py-4 align-content-between flex-wrap">
<div class="col-lg-4 d-flex justify-content-center align-items-center">
<p class="text-secondary mb-0">Copyright © Saud</p>
</div>
<div class="col-lg-4">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary " data-toggle="modal" data-target="#exampleModal"> Contact Us </button>
</div>
<div class="col-lg-4 d-flex justify-content-center align-items-center">
<ul class="list-inline quicklinks mb-0">
<li class="list-inline-item">
<a href="#">Privacy Policy</a>
</li>
<li class="list-inline-item">
<a href="#">Terms of Use</a>
</li>
</ul>
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
https://codeply.com/p/BBJM8P9UPR
| 归档时间: |
|
| 查看次数: |
4633 次 |
| 最近记录: |