탐색 모음에서 기본 부트 스트랩 패딩을 제거 할 수 없습니다.

다소 사용자 정의 된 부트 스트랩 탐색 모음이 있습니다. Bootstrap은 나비 바에있는 <a> 요소에 padding-left과 padding-right을 적용합니다. 나는 navbar의 첫 번째 <a> 요소에있는 padding-left을 덮어 쓰려고 시도했지만 ("Collection"이라고 쓰여 있음) 성공하지 못했습니다. 실제로는 첫 번째 <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; 
}

출처

2014-10-02 Blaz Kranjcev

문제는 패딩이 아니다. 문제는 텍스트가 중앙에 정렬된다는 것입니다.

요소에 text-align: left을 추가하면 원하는 모양이 조정되어야합니다.

이

는 문제를 일으키는 부트 스트랩의 코드 당신이 당신의 jsFiddle을 변경하는 경우

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

}

당신은 CSS의 다음 섹션에 추가 할 수 있습니다 :

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

가 !important 후 유의하시기 바랍니다 그것. 그러면 기본 호출이 무시되고 원하는 효과가 나타납니다.

다음은 업데이트 된 jsFiddle 예입니다.

출처

2014-10-02 16:27:33 ZombieCode

전에이 작업을 수행해야했습니다. <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; 
}

출처

2014-10-02 16:36:29 spasticninja

문제는 탐색의 a 태그 대신 인라인의 블록으로 표시됩니다 있다는 것입니다. display을 flex으로 설정하여 유연한 블록으로 표시하도록 변경 한 다음 width을 100%으로 설정하여 전체 블록 영역을 링크로 유지할 수 있습니다.

단순히처럼 보이도록 .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/

출처

2014-10-02 16:37:28

여기 @dippas 같은 몇 가지 다른 답변에 동의하지만, 사진은 당신이뿐만 아니라 앵커 패딩을 오버라이드 (override) 할 필요가 같이 왼쪽으로 텍스트 높이를 얻을 수 :

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

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

출처

2014-10-02 16:44:16 jimplode

탐색 모음에서 기본 부트 스트랩 패딩을 제거 할 수 없습니다.

답변

관련 문제