CSS - Bootstrap Auto padding?

Question

Я пытаюсь создать веб-страницу, используя Bootstrap. Вот мой код:

<div class="row"> 
    <div class="table-row"> 
     <div class="mycolumn" id="sidebar"> 

      <div class="list-group"> 
        <div class="list-group-item"><input type="text" class="form-control" /></div> 
        <div id="mainmenucontentdiv" class="list-group-item"> 
         <div> 
          <a class="list-group-item" href="#">Temporibus sit</a> 
          <a class="list-group-item" href="#">Deserunt consequuntur</a> 
          <a class="list-group-item" href="#">magni nesciunt</a> 
          <a class="list-group-item" href="#">lorem bla </a> 
         </div> 
        </div> 
       </div> 
      </div> 

      <div id="contentarea" class="mycolumn"> 
       <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero molestiae ipsam fuga excepturi, ullam illum iste non culpa et beatae, aut, cupiditate vitae voluptatibus explicabo magni tempora impedit saepe inventore.</div> 
      </div> 
    </div> 
</div> 

CSS:

#sidebar{ 
    background-color: red; 
    padding: 20px 0px 0px; 
    width: 250px; 
} 
.mycolumn{ 
    display: table-cell; 
    padding-left: 15px; 
    padding-right: 15px; 
    padding-bottom: 15px; 
} 
#mainmenucontentdiv { 
    overflow: hidden; 
    padding: 0; 
} 
.table-row{ 
    display: table-row; 
} 

Чтобы лучше рассмотреть этот пример, вы можете увидеть его здесь: http://jsfiddle.net/pkctb8uc/

Почему, что содержание в #contentarea выталкивается вниз? Как вы видите, в верхней части находится большая пустая область. Как я могу это исправить?

Answer 1

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

Answer 2

Редактировать CSS следующим образом,

.mycolumn{ 
    float: left; 
position: relative; 
display: table-cell; 
padding-left: 15px; 
padding-right: 15px; 
padding-bottom: 3px; 
padding-top: 16px; 
width: 37%; 
}