2013-11-30 2 views
4

Я использую twitter bootstrap 3, чтобы создать макет, который имеет два столбца, боковую панель с плавающей точкой и основное содержимое с левым полем относительно размера боковой панели, но когда я использую класс clearfix в уль элемента внутри основного контента, кажется, что clearfix класс, очистить боковую панель (плавать ясно) и нажмите мкл и последующее содержание вниз.twitter bootstrap clearfix push down

см http://bootply.com/97603

HTML

<aside id="sidebar"> 
<h1>Search Items</h1> 
<form id="searchForm"> 
    <div class="form-group"> 
     <label for="category">Category</label> 
     <select name="category" id="category" class="form-control"> 
      <option value="">Choose</option> 
      <option value="1">Category 1</option> 
      <option value="2">Category 2</option> 
      <option value="3">Category 3</option> 
     </select> 
    </div> 
    <div class="form-group"> 
     <label for="term">Search Term</label> 
     <input type="text" name="term" id="term" class="form-control"/> 
    </div> 
    <div class="text-center"> 
     <button class="btn btn-default">Search</button> 
    </div> 
</form> 

CSS

body{ 
    background: #F7F5FA; 
    overflow-x: hidden; 
} 
.container-full { 
    margin: 0 auto; 
    width: 100%; 
    padding: 0 15px; 
} 
#sidebar{ 
    float: left; 
    width: 260px; 
    position: relative; 
    background: #ddd; 
    display: block 
} 
#sidebar #searchForm{ 
    padding: 10px; 
} 
#main-content{ 
    margin: 0px 0px 0px 260px; 
    background: #FFF; 
    position: relative; 
    min-height: 600px; 
    width: auto; 
} 
.gallery ul{ 
    background: black; 
} 
.gallery li{ 
    float: left; 
    width: 120px; 
    height: 120px; 
    padding: 5px; 
    background: #ddd; 
} 
.gallery li a{ 
    display: block; 
} 

Как я могу исправить это поведение?

ответ

3

добавить этот класс в CSS:

.row{ 
    overflow:hidden; 
} 

DEMO


это из-за вашего aside, заданные вами фиксированной ширины к aside и установленной маржи вашему main-content, это не так способ поставить элемент бок о бок. но если вы используете процентную ширину для своих aside и main-content и используете float, это будет хорошо выглядеть, и нет необходимости в overflow:hidden (или авто).

взгляда на это:

DEMO

#sidebar{ 
    float: left; 
    width: 20%; /* instead 260px */ 
    position: relative; 
    background: #ddd; 
    display: block 
} 

#main-content{ 
    background: #FFF; 
    position: relative; 
    min-height: 600px; 
    width: 80%; /* instead auto */ 
    float:left; /* added   */ 
} 
+0

Этого работает, но я не могу понять, почему, так что вы можете объяснить это поведение ?. Примечание. Я видел, что .row {overflow: auto; } работает тоже. – dhamaso

+0

@dhamaso ответ обновлен. –

1
#main-content { 
background: none repeat scroll 0 0 #FFFFFF; 
margin: 0 0 0 260px; 
min-height: 600px; 
position: relative; 
width: auto; 

}

положения

изменения: относительно позиции: абсолютный в выше идентификатору ваша проблема будет решена ..