Twitter Bootstrap：中心药丸

【问题标题】：Twitter Bootstrap: Center PillsTwitter Bootstrap：中心药丸
【发布时间】：2011-11-02 04:27:45
【问题描述】：

我的问题是如何使药丸居中？

我尝试在周围添加中心块并将float:left 更改为float:center，但没有任何帮助。

【问题讨论】：

没有'float:center'这样的东西哦，如果有的话。如此多的开发人员将在他们的生活中留下如此多的时间。如果你用谷歌搜索，有一些技术可以让标签居中，但在 twitter-bs 的情况下可能需要一些定制

标签： html css twitter-bootstrap

【解决方案1】：

这变得简单多了！您只需在容器上使用text-center 类，并将display:inline-block 应用于ul。只需确保您有一个换行符或段落标记将导航与容器内的任何其他元素分开。

完成！ 2 个类添加，1 行 CSS（不要修改引导 css 文件！）。

HTML：

<div class="col-md-12 text-center">
    <p>Copyright stuff</p>
    <ul class="nav nav-pills center-pills">
        <li><a href="#">Footer nav link</a></li>
        <li><a href="#">Footer nav link</a></li>
    </ul>
</div>

CSS：

.center-pills { display: inline-block; }

2015 年编辑：正如 Artur Beljajev 所言，Flexbox 支持现在是 common enough，您可能想改用它：

.center-pills {
    display: flex;
    justify-content: center;
}

【讨论】：

这对我来说比 broox 解决方案效果更好。使用 broox 溶液时，我的药片位置很奇怪（一个总是在下面）。感谢分享:)
知道为什么添加这种样式会在下面留下一个空格（好像有填充一样）？
@RachelS 你用的是哪种风格？你有我可以看看的 jsfiddle 吗？
注意，我使用的是 Flexbox 版本，当内容在移动显示端口时它不起作用。原来的答案虽然有效。
@Terry 感谢您指出这一点。它做了什么？您使用的是什么移动查看模式或设备？

【解决方案2】：

如果您想在可变宽度容器中使用可变宽度药丸，我建议使用 inline-block 显示类型并向药丸容器添加一个类。

这是我如何扩展 bootstrap 以使药丸居中。

CSS：

.centered-pills { text-align:center; }
.centered-pills ul.nav-pills { display:inline-block; }
.centered-pills li { display:inline; }
.centered-pills a { float:left; }
* html .centered-pills ul.nav-pills { display:inline; } /* IE6 */
*+html .centered-pills ul.nav-pills { display:inline; } /* IE7 */

HTML：

<div class="row">
  <div class="span12 centered-pills">
    <ul class="nav nav-pills">
      <li><a href="#">derek</a></li>
      <li><a href="#">brooks</a></li>
      <li><a href="#">is</a></li>
      <li><a href="#">super</a></li>
      <li class="active"><a href="#">awesome</a></li>
    </ul>
  </div>
</div>

【讨论】：

将ul.nav-pills 添加到第 3 和第 4 选择器中，以防您像我一样在 centered-pills 元素中碰巧有其他列表。 .centered-pills ul.nav-pills li { display:inline; } .centered-pills ul.nav-pills li a { float:left; }

【解决方案3】：

或弹性盒方法：

.nav-pills {
    display: flex;
    justify-content: center;
}

【讨论】：

如果目标浏览器可以处理，这是最简单的解决方案。谢谢。
就我而言，我有很多
元素，所以我使用了这个额外的 flex-wrap: wrap;

【解决方案4】：

如果您希望药丸居中而不是左对齐，则需要更改 css。您将需要指定宽度并将边距更改为自动。

例如：

.tabs, .pills {
    margin: 0 auto;
    padding: 0;
    width: 400px;
}

【讨论】：

这是正确的，但我不建议编辑 CSS 文件。我会创建自己的 CSS 文件来扩展 Twitter Bootstrap CSS。
为 Bootstrap 定义 960px 的宽度可帮助您将无法居中的内容居中。定义宽度并使用偏移量。
我会推荐prrstn的解决方案。这修复了最初完全忽略了使用引导程序的大小。

【解决方案5】：

虽然@minaz 的答案适用于具有已知宽度的列表，但我会提出一个不同的解决方案，即使您更改列表的内容也能实际工作：

.tabs, .pills {
  text-align: center;
}

.tabs li, .pills li {
  float: none;
}

或者在 SCSS 中：

.tabs, .pills {
  text-align: center;
  li { float: none; }
}

这将使列表中的文本居中，并重置列表项的float 属性，使其受text-align 属性的影响。

【讨论】：

这在语法上不正确。你不能嵌套这样的 CSS 规则
你是对的，这是用scss编写的，它允许这种嵌套。您必须将 li 部分拉出并指定 .tabs li 和 .pills li

【解决方案6】：

Bootstrap 4 的简单解决方案在<ul>导航处使用justify-content-center

例子：

@import url('https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="mt-5">
  <ul class="nav nav-pills mb-3 justify-content-center" id="pills-tab" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a>
    </li>
  </ul>
  <div class="tab-content" id="pills-tabContent">
    <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
      <div class="card text-white bg-success mb-3 mx-2 px-2">
        <h1>Hi</h1>
      </div>
    </div>
    <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
      <div class="card text-white bg-info mb-3 mx-2 px-2">
        <h1>Hi</h1>
      </div>
    </div>
    <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">
      <div class="card text-white bg-danger mb-3 mx-2 px-2">
        <h1>Ni Hao</h1>
      </div>
    </div>
  </div>
</div>

【讨论】：

【解决方案7】：

Bootstrap 4 解决方案非常简单：

<ul class="nav justify-content-center">

https://getbootstrap.com/docs/4.0/components/navs/

【讨论】：