Question

我有一个或多或少定制的Bootstrap导航栏。事情是，Bootstrap将padding-left和padding-right应用于导航栏中的<a>元素。我试图覆盖导航栏中第一个padding-left元素上的<a>（表示＆＃34; Collection＆＃34;），但没有成功。它实际上必须看起来像第一个<a>元素从导航栏的开头开始。我添加了一张照片以便于理解。

result

这是小提琴：http://jsfiddle.net/jxgkrtsd/8/

代码：

<ul class="nav nav-tabs nav-justified" role="tablist">
    <div class="bottom-line"></div>
            <li><a href="kolekcija.html">Kolekcija 24<sup> 7</sup></a></li>
            <li><a href="#">Izdelki</a></li>
            <li><a href="#">Zgodba</a></li>
            <li><a href="#">Mediji</a></li>
            <li><a href="#">Materiali</a></li>
        </ul>
        <div class="bottom-line"></div>

CSS：

@import url("http://fonts.googleapis.com/css?family=Exo:400,500&subset=latin,latin-ext");

body {
    font-family: 'Exo', sans-serif;
    font-weight: 500;
}
.nav > li > a:hover,
.nav > li > a:focus {
  background-color: transparent;
  border-color: transparent;
}

.nav > li > a {
  padding: 10px 5px !important;
  margin-right: 0 !important;
    color: black;
}

.nav-tabs.nav-justified > li > a {
  border-bottom: none;
}

.nav-tabs > li > a:hover {
  border-color: none !important;
}

a:hover,
a:focus {
  color: black !important;
}

.bottom-line {
  height: 1px;
  width: 1430px;
  background: black;
  position: absolute;
}

Answer 1

问题不在于填充。问题是文本与中心对齐。

为您的元素添加text-align: left，事情应该根据您的需要进行调整。

这是导致问题的Bootstrap中的代码

.nav-tabs.nav-justified > li > a {

}

如果您更改了jsFiddle，可以将其添加到CSS的以下部分：

.nav > li > a {
    padding: 10px 5px !important;
    margin-right: 0 !important;
    color: black;
    text-align:left !important;
}

请注意!important之后的{{1}}。这将覆盖主要调用并提供所需的效果。

以下是更新的jsFiddle示例。

Answer 2

我之前需要这样做。使用<nav class="....">后，将其余内容放入class="container-fluid"的新div中。看起来应该是这样的：

<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
 <div class="container-fluid">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand visible-xs" href="{{ HOME_PATH }}/">{{ site.title }}</a>
    </div>
   ...

然后你可以用它来摆脱导航栏或品牌链接的填充。

nav .container-fluid{
  padding-left:0px;
  padding-right:0px;
}

要删除链接中的填充，您可以使用以下内容：

.navbar-nav>li>a{
  padding-left:0px;
}

Answer 3

我想更改默认的导航栏引导填充。我的意图是将底部填充更改为4.5rem。下面的代码对我有用

.navbar{
padding-bottom: 4.5rem !important;

}

Answer 4

问题是导航中的a标记显示为块，而不是内联。您可以将display设置为flex，将其更改为显示为灵活块，然后将width设置为100%，将整个区域区域保留为链接。< / p>

只需将这些内容添加到.nav > li > a的自定义CSS中即可：

.nav > li > a {
 padding: 10px 5px !important;
 margin-right: 0 !important;
 color: black;
 display: flex;
 width: 100%;
}

这将保留块的顶部和底部填充/边距，作为链接的块的整个宽度，并删除左/右填充/边距。

这是一个JSFiddle显示它：http://jsfiddle.net/9kzfaypp/

Answer 5

我同意这里的一些其他答案，比如@dippas，但要将文字刷新到左边，因为你的图片显示你需要覆盖锚填充：

.nav-tabs.nav-justified > li > a {
text-align:left;
padding-left:0px !important;
padding-right:0px !important;
}

http://jsfiddle.net/jxgkrtsd/10/

无法删除导航栏中的默认Bootstrap填充

5 个答案: