居中 Bootstrap 4 个药丸在小屏幕上相互对齐
Centering Bootstrap 4 pills to align over each other on small screens
是否有一个内置的 Bootstrap 4 技巧可以将这三个对齐到中心,在一条线上 "on a large screen",它们之间有一个小的 space,然后将它们放在上面在小屏幕上显示时彼此?
<h4 class="h4">Follow Social Media</h4>
<div class="row">
<div class="col-6-lg col-4-md col-1-sm center-pills">
<ul class="nav nav-pills">
<li class="nav-tabs">
<a class="nav-link active social social_f" href="#">Facebook</a>
</li>
<li class="nav-tabs">
<a class="nav-link active social social_i" href="#">Instagram</a>
</li>
<li class="nav-tabs">
<a class="nav-link active social social_y" href="#">Youtube</a>
</li>
</ul>
</div>
</row>
我试过添加自定义 css 但它总是分崩离析,看起来很乱。
此时,上面的代码输出如下:
Is there a build in bootstrap 4 trick that will align these three to centre
首要技巧之一是使用实际存在的 Bootstrap classes。
col-6-lg col-4-md col-1-sm
classes 不存在.
下一个最佳技巧是将 nav-tabs
class 替换为 nav-item
,因为 nav-tabs
class 并非设计用于此方式你试图。
需要将 mx-auto
class 添加到列中以使其居中。
最后,将 nav-justified
添加到父元素将起到均匀散布药丸的作用。对于填充,您可以使用响应式填充 classes px-lg-3 p-md-2 p-1
.
单击下面的 "run code snippet" 按钮并展开到整页:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-lg-12 col-sm-5 col-6 text-center mx-auto">
<h4 class="h4">Follow Social Media</h4>
<ul class="nav nav-pills nav-justified">
<li class="nav-item px-lg-3 p-md-2 p-1">
<a class="nav-link active social social_f" href="#">Facebook</a>
</li>
<li class="nav-item px-lg-3 p-md-2 p-1">
<a class="nav-link active social social_i" href="#">Instagram</a>
</li>
<li class="nav-item px-lg-3 p-md-2 p-1">
<a class="nav-link active social social_y" href="#">Youtube</a>
</li>
</ul>
</div>
</div>
</div>
是否有一个内置的 Bootstrap 4 技巧可以将这三个对齐到中心,在一条线上 "on a large screen",它们之间有一个小的 space,然后将它们放在上面在小屏幕上显示时彼此?
<h4 class="h4">Follow Social Media</h4>
<div class="row">
<div class="col-6-lg col-4-md col-1-sm center-pills">
<ul class="nav nav-pills">
<li class="nav-tabs">
<a class="nav-link active social social_f" href="#">Facebook</a>
</li>
<li class="nav-tabs">
<a class="nav-link active social social_i" href="#">Instagram</a>
</li>
<li class="nav-tabs">
<a class="nav-link active social social_y" href="#">Youtube</a>
</li>
</ul>
</div>
</row>
我试过添加自定义 css 但它总是分崩离析,看起来很乱。
此时,上面的代码输出如下:
Is there a build in bootstrap 4 trick that will align these three to centre
首要技巧之一是使用实际存在的 Bootstrap classes。
col-6-lg col-4-md col-1-sm
classes 不存在.
下一个最佳技巧是将 nav-tabs
class 替换为 nav-item
,因为 nav-tabs
class 并非设计用于此方式你试图。
需要将 mx-auto
class 添加到列中以使其居中。
最后,将 nav-justified
添加到父元素将起到均匀散布药丸的作用。对于填充,您可以使用响应式填充 classes px-lg-3 p-md-2 p-1
.
单击下面的 "run code snippet" 按钮并展开到整页:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-lg-12 col-sm-5 col-6 text-center mx-auto">
<h4 class="h4">Follow Social Media</h4>
<ul class="nav nav-pills nav-justified">
<li class="nav-item px-lg-3 p-md-2 p-1">
<a class="nav-link active social social_f" href="#">Facebook</a>
</li>
<li class="nav-item px-lg-3 p-md-2 p-1">
<a class="nav-link active social social_i" href="#">Instagram</a>
</li>
<li class="nav-item px-lg-3 p-md-2 p-1">
<a class="nav-link active social social_y" href="#">Youtube</a>
</li>
</ul>
</div>
</div>
</div>