我有一个导航栏,我想在标题下方居中。我在这里缺少一些东西,我希望它能正确调整大小,并始终保持居中。

    <div class="row">
      <div class="col-md-12">
        <h2 class="portfolio-head">PORTFOLIO</h2>
      </div>
    </div>
    <div class="row">
        <div class="col-md-12 col-xs-12 text-center">
            <div class="portfolio-nav-holder col-md-6">
              <ul class="portfolio-nav">
                <li><a>Featured</a></li>
                <li><a>Websites</a></li>
                <li><a>Logos</a></li>
                <li><a>Graphics</a></li>
                <li><a>Photography</a></li>
              </ul>
            </div>
        </div>
    </div>


DEMO

最佳答案

从链接中删除float并创建liinline-block,然后父级(您已经拥有)上的text-align: center将所有内容居中。

ul上还有一个默认的左填充,因此将padding: 0添加到.portfolio-nav使其真正居中。

而不是向导航中的所有a添加正确的边距,只需将其添加到2个a之间,并使用.portfolio-nav li:not(:last-child) a { margin-right: 15px; }



.portfolio-head {
  font-family: 'Lato', sans-serif;
  font-size: 2.5em;
  font-style: italic;
  text-align: center;
}

.portfolio-nav-holder {
  height: 20px;
  margin: 0 auto;
  overflow: hidden;
}

.portfolio-nav {
  color: black;
  list-style: none;
  padding: 0;
}

.portfolio-nav a {
  text-decoration: none;
  color: black;
}

.portfolio-nav li:not(:last-child) a {
  margin-right: 15px;
}

.portfolio-nav li {
  display: inline-block;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-md-12">
    <h2 class="portfolio-head">PORTFOLIO</h2>
  </div>
</div>
<div class="row">
  <div class="col-md-12 col-xs-12 text-center">
    <div class="portfolio-nav-holder">
      <ul class="portfolio-nav">
        <li><a>Featured</a></li>
        <li><a>Websites</a></li>
        <li><a>Logos</a></li>
        <li><a>Graphics</a></li>
        <li><a>Photography</a></li>
      </ul>
    </div>
  </div>
</div>

关于jquery - 导航栏Wont Center Bootstrap,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/43578224/

10-12 12:47
查看更多