0

是否有一个内置的 Bootstrap 4 技巧可以将这三个对齐到中心，在“大屏幕上”的一行中，它们之间有一个小的空间，然后在小屏幕上显示时将它们放在一起？

 <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，但它一直在分崩离析，看起来很乱。

目前，上面的代码输出如下： 在此处输入图像描述

4

1 回答 1

2

是否有内置的 bootstrap 4 技巧可以将这三个对齐到中心

第一个技巧是使用实际存在的 Bootstrap 类。

col-6-lg col-4-md col-1-sm类不存在。

下一个最佳技巧是将您的nav-tabs课程替换为，nav-item因为该nav-tabs课程并非旨在以您尝试的方式使用。

需要将该mx-auto类添加到列中以使其居中。

最后，添加nav-justified到父元素将起到均匀分布药丸的作用。对于填充，您可以使用响应式填充类px-lg-3 p-md-2 p-1。

单击下面的“运行代码片段”按钮并展开到整页：

<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>

于 2018-02-16T18:38:44.067 回答