使Bootstrap 4药丸居中以在小屏幕上彼此对齐 [英] Centering Bootstrap 4 pills to align over each other on small screens

问题描述

是否存在内置的Bootstrap 4技巧，可以将这三个对齐到居中的位置，在一条大屏幕上"的行中，它们之间有一个很小的空间，然后在小屏幕上显示时将它们相互放置?

Is there a built-in Bootstrap 4 trick that will align these three to centre, in a line "on a large screen", with a small space between them, then place them over each other when displayed on a small screen?

 <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，但是它会不断散乱，看起来很乱.

I've tried adding custom css but it keeps falling apart and looks messy.

目前，上面的代码输出如下:

At the moment, the code above output this:

推荐答案

bootstrap 4技巧中是否有一个内置的技巧，可以将这三个技巧居中对齐

Is there a build in bootstrap 4 trick that will align these three to centre

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

One of the first tricks is to use Bootstrap classes that actually exist.

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

下一个最佳技巧是将 nav-tabs 类替换为 nav-item ，因为 nav-tabs 类不是设计好的以您尝试的方式使用.

The next best trick is to replace your nav-tabs class with nav-item because the nav-tabs class isn't designed to be used the way you attempted to.

mx-auto 类需要添加到列中以使其居中.

The mx-auto class needs to be added to the column to center it.

最后，将 nav-justified 添加到父元素将完成均匀散布药丸的技巧.对于填充，您可以使用响应式填充类 px-lg-3 p-md-2 p-1 .

Finally, adding nav-justified to the parent element will do the trick of spreading the pills evenly. And for padding, you can use responsive padding classes px-lg-3 p-md-2 p-1.

点击下面的运行代码段"按钮，然后展开到整页:

Click the "run code snippet" button below and expand to full page:

<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药丸居中以在小屏幕上彼此对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！