Css 使用Flexbox引导4中心元素
使用引导程序4 Alpha 6。我有以下标记:Css 使用Flexbox引导4中心元素,css,twitter-bootstrap,bootstrap-4,flexbox,Css,Twitter Bootstrap,Bootstrap 4,Flexbox,使用引导程序4 Alpha 6。我有以下标记: <header class="jumbotron jumbotron-fluid"> <div class="container"> <div class="row justify-content-center flex-column-reverse flex-sm-row"> <div class="col-12
<header class="jumbotron jumbotron-fluid">
<div class="container">
<div class="row justify-content-center flex-column-reverse flex-sm-row">
<div class="col-12 col-sm-6">
<h1 class="display-4">
<a class="border-0" href="/@v">Vic</a>
</h1>
<p class="lead mb-100">We utilize a default z-index scale in Bootstrap that’s been designed to properly layer navigation, tooltips and popovers, modals, and more.</p>
<p>
<svg>...</svg>Boston, MA, US<br>
</p>
</div>
<div class="col-12 col-sm-2">
<a class="border-0" href="/@v">
<img class="d-flex rounded-circle avatar--m" alt="Random Name" src="/system/profiles/avatars/000/000/001/avatar_m/firefox-copy-link.jpg?1489589655">
</a> </div>
</div>
</div>
</header>
我们在引导中使用默认的z索引比例,该比例设计用于正确分层导航、工具提示和弹出窗口、模态等
…美国马萨诸塞州波士顿
分别在手机和桌面上生成以下结果:
移动
桌面
桌面版目前看起来很完美。如何仅在移动设备上将图像居中?您可以在图像上使用引导4。使用
mx auto
居中,然后使用mx-sm-0
在sm
上保持正常边距
演示: