Bootstrap - 证明div

Question

我尝试在下面的图片上对齐我的div

我的代码看起来像

<div class="container">
    <div class="row">
      <div class="col-md-12">
        <a href="#">restaurant</a>
        <a href="#">halls</a>
        <a href="#">menu</a>
        <a href="#">reservation</a>
        <a href="#">store</a>
        <a href="#">reviews</a>
        <a href="#">news</a>
      </div>
    </div>
  </div>

问题是我不知道如何用bootstrap做到这一点。我试图将a放在div col-md-2类中，但它没有对齐。另外，我尝试将float: left;设置为第一个a，将float: right;设置为最后一个，并为其余text-align: center设置a，但它仍然没有正确无误

Answer 1

我用bootstrap nav

做到了

<div class="container">
    <ul class="nav nav-justified">
      <li><a href="#"><%= t('navigation.restaurant') %></a></li>
      <li><a href="#"><%= t('navigation.halls') %></a></li>
      <li><a href="#"><%= t('navigation.menu') %></a></li>
      <li><a href="#"><%= t('navigation.reservation') %></a></li>
      <li><a href="#"><%= t('navigation.store') %></a></li>
      <li><a href="#"><%= t('navigation.reviews') %></a></li>
      <li><a href="#"><%= t('navigation.news') %></a></li>
    </ul>
  </div>

Answer 2

试试这个..

<ul class="nav nav-pills">
    <li role="presentation"  class="active"><a href="#">restaurant</a></li>
    <li role="presentation"><a href="#">halls</a></li>
    <li role="presentation"><a href="#">menu</a></li>
    <li role="presentation"><a href="#">reservation</a></li>
    <li role="presentation"><a href="#">store</a></li>
    <li role="presentation"><a href="#">reviews</a></li>
    <li role="presentation"><a href="#">news</a></li>
</ul>

Answer 3

你只需添加几个样式和一个类别。

<div class="container-fluid">
  <div class="row">
    <div class="col-md-12 text-center">
      <a href="#">restaurant</a>
      <a href="#">halls</a>
      <a href="#">menu</a>
      <a href="#">reservation</a>
      <a href="#">store</a>
      <a href="#">reviews</a>
      <a href="#">news</a>
    </div>
  </div>
</div>

和样式

a {
  margin: 10px 10px 0;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  padding: 10px 0;
  display: inline-block
}

a:first-of-type {
  margin-left: 0
}

a:last-of-type {
  margin-right: 0
}

这是工作小提琴..

<强> https://jsfiddle.net/Anuj_Kumar/45Lvf6r5/1/embedded/result/

Answer 4

试试这个：

.container .row{
  text-align: center;
}
.container .row a{
  margin: 0 20px;
}

jsfiddle

Answer 5

试试这个：

.container
{
  background:black;
  padding:20px;
  float:left;
}
.row
{
  position:relative;

}
.col-md-12 a
{
  text-decoration:none;
  color:white;
  text-align:center;
  padding:5px;


 }

DEMO HERE

Answer 6

这是实现这一目标的方法。它在Bootstrap中称为网格系统：

<div class=row>
    <div class="col-md-1">
        <center><a href="#">restaurant</a></center>
    </div>
    <div class="col-md-1">
        <center><a href="#">halls</a></center>
    </div>
    <div class="col-md-1">
        <center><a href="#">menu</a></center>
    </div>
    <div class="col-md-1">
        <center><a href="#">reservation</a></center>
    </div>
    <div class="col-md-1">
        <center><a href="#">store</a></center>
    </div>
    <div class="col-md-1">
        <center><a href="#">reviews</a></center>
    </div>
    <div class="col-md-1">
        <center><a href="#">news</a></center>
    </div>

  </div>