Проблема с нижним отступом/маржа с Twitter Bootstrap

Question

Итак, я работаю над тем, чтобы быстро создать тему сайта (Wordpress) с помощью бутстрапа Twitter, и у меня возникла проблема.

У меня есть заголовок выброшены вместе, и я получил этот странный разрыв происходит внутри раздела «тянуть-право», не уверен, почему:

Я не уверен, что это за сделка, я хочу, чтобы они сидели на линии прямо на одном уровне с текстом слева.

Во всяком случае, у меня есть следующие соответствующие разделы кода:

(HTML для заголовка раздела):

<!-- Header --> 
    <div class="row header-container"> 
     <div class="col-md-8 col-md-offset-2"> 
     <div class="pull-left"> 
      <h3>CharlesBaker.net</h3> 
     </div> 
     <div class="pull-right"> 
      <ul> 
      <li><a href="#">Test1</a></li> 
      <li><a href="#">Test2</a></li> 
      <li><a href="#">Test3</a></li> 
      </ul> 
     </div> 
     </div> 
    </div> 

(CSS для одной и той же секции):

.header-container { 
    padding-top: 50px; 
    background-color: #c0c0c0; 
    border-bottom: 5px solid #880000; 
} 

.header-container h3 { 
    margin: 0; 
    padding: 0; 
    font-family: 'Montserrat', serif; 
} 

.header-container ul { 
    margin: 0; 
    padding: 0; 
} 

.header-container ul li { 
    display: inline; 
    margin: 0; 
    padding: 0; 
} 

.header-container a { 
    padding: 3px; 
    color: black; 
} 

.header-container a:hover { 
    text-decoration: none; 
    background-color: #880000; 
    color: white; 
} 

Не уверен, в чем проблема, если только это не связано с тем, что я использую тег вместо простого стиля <span> или что-то в этом роде, но так как я удалял добавку/маржу с помощью CSS, я бы Думаю, это будет проблемой.

Любая помощь будет отличной. Идея состоит в том, что, когда я наводил на ссылки справа, они заключены в алую цветную коробку, которая «простирается» с нижней границы 5 пикселей.

Заранее благодарен!

Answer 1

Вы ищете this?

Вам необходимо установить .header-container как display: inline-block, чтобы выровнять все элементы внутри. Поэтому вам нужно поплавать вашими элементами div (поплавок и левый). Только один последнее изменение, установите размер ширины вашего заголовка: Я поставил 100%, но вы можете установить, что вам нравится :)

CSS:

.header-container { 
    padding-top: 50px; 
    background-color: #c0c0c0; 
    border-bottom: 5px solid #880000; 
    width: 100%; 
    display: inline-block; 
} 
.pull-left { 
    float: left; 
} 
.pull-right { 
    float: right; 
} 

Answer 2

Существует особая высота линии свойство для h3 бирка с бутстрапом.

h1, h2, h3 { 
    line-height: 40px;//line 760 
} 

Поэтому вам нужно будет добавить стиль, чтобы обсудить эту дополнительную высоту.

Также еще один набор для ул как:

ul, ol { 
    margin: 0 0 10px 25px; //line 812 
} 

Решение:

1. Чрезмерных ездить маржу улей следующим образом:

   .pull-right ul{ 
       margin: 0; 
   } 
   

2. Чрезмерных оседлать линию -высота для h3 следующим образом:

   .pull-left h3{ 
       line-height:20px; 
   } 
   

Первый из них довольно прямолинейный и дает правильное выравнивание. Второе решение потребует от вас работы с настройкой отрицательных полей для .pull-right.

Отладки URL: http://jsbin.com/oToRixUp/1/edit?html,css,output

Надеется, что это помогает.