html - Bootstrap 导航高度

Question

我想在我的网站上使用 nav-pills 类实现导航，但是当我使用下面的代码时，导航中的按钮太大。我想改变它的高度。有什么解决办法吗？

<div class="row">
        <div class="box">
            <div class="col-sm-12 text-center">
                <ul class="nav nav-pills">
                    <li role="presentation" class="active"><a href="#">Rekonstrukce</a></li>
                    <li role="presentation"><a href="#">Zemní práce</a></li>
                    <li role="presentation"><a href="#">Rodinné domy</a></li>
                </ul>
            </div>

            <div class="col-sm-4 text-center">
                <a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox"> 
                  <img class="img-responsive" src="img/rekonstrukce/pic1.jpg" alt=""> 
                </a>                  
            </div>
            <div class="col-sm-4 text-center">
                <img class="img-responsive" src="http://placehold.it/750x450" alt="">
            </div>
            <div class="col-sm-4 text-center">
                <img class="img-responsive" src="http://placehold.it/750x450" alt="">
            </div>
            <div class="clearfix"></div>
        </div>
    </div>

Answer 1

将此添加到您的 CSS 中:

.nav>li>a {
    padding: 4px 6px !important;
}

(根据你需要的大小调整padding值)