twitter bootstrap clearfix нажать вниз

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

см. 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;
}

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


css twitter-bootstrap push overflow clearfix
person dhamaso    schedule 30.11.2013    source источник

Ответы (2)


arrow_upward
3
arrow_downward

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

.row{
    overflow:hidden; 
}

ДЕМО

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

посмотри на это:

ДЕМО

#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          */
}
person Mohsen Safari    schedule 30.11.2013
comment
Это работает, но я не могу понять, почему, так что вы можете объяснить это поведение? Примечание. Я видел, что .row{ overflow: auto; } тоже работает. - person dhamaso; 02.12.2013

arrow_upward
1
arrow_downward 

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

}

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

person Tony    schedule 30.11.2013