Строка начальной загрузки выходит за рамки охватывающих столбцов

Я пытался воспроизвести дизайн Quora в Bootstrap, когда столкнулся со следующей проблемой. На каждой странице вопросов Quora скажите в этом есть левая боковая панель. Итак, для первого раздела (под названием «Хочу получить ответы») у меня есть следующая структура:

<div class="col-lg-2">
    <div id="left-sidebar">
        <div id="want-answers">
            <p><small>18 WANT ANSWERS</small></p>
            <hr>
            <div class="row">
                <div class="col-lg-3"><img src="img/350x350.gif}" alt="" width="32px" height="32px"></div>
                <div class="col-lg-3"><img src="img/350x350.gif}" alt="" width="32px" height="32px"></div>
                <div class="col-lg-3"><img src="img/350x350.gif}" alt="" width="32px" height="32px"></div>
                <div class="col-lg-3"><img src="img/350x350.gif}" alt="" width="32px" height="32px"></div>
            </div>

            <div class="row">
                <div class="col-lg-3"><img src="img/350x350.gif}" alt="" width="32px" height="32px"></div>
                <div class="col-lg-3"><img src="img/350x350.gif}" alt="" width="32px" height="32px"></div>
                <div class="col-lg-3"><img src="img/350x350.gif}" alt="" width="32px" height="32px"></div>
                <div class="col-lg-3"><img src="img/350x350.gif}" alt="" width="32px" height="32px"></div>
            </div>
        </div>
        <!-- /#want-answers -->

Левая боковая панель имеет ширину 2 колонки. Теперь, когда отображается изображение, каждая строка (горизонтальное выделение) расширяется на want-answers div (вертикальное синее выделение). Почему так? Разве строка не должна охватывать всю ширину охватывающего col-lg-2 div?

введите здесь описание изображения


css twitter-bootstrap twitter-bootstrap-3
person abhinavkulkarni    schedule 20.04.2015    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Я не уверен, что это проблема, но попробуйте закрыть теги изображений следующим образом: <img src="img/350x350.gif}" alt="" width="32px" height="32px"/> в вашем коде нет завершающей косой черты.

Большая часть достижения того, что вы ищете, будет связана с переопределением отступов и полей по умолчанию, которые начальная загрузка применяет к строкам и/или столбцам. Мне удалось разместить изображения и отцентрировать их со следующими изменениями: DEMO

CSS:

#left-sidebar {
text-align:center;
background:#ccc;
}
.min-width {
min-width:153px;
}
#want-answers {
background:#f1f1f1;
min-width:153px;
width:100%;
text-align:center;
}
.no-marg-pad {
padding:0;
margin:0;
}
.img-line {
background:#000;
width:100%;
min-width:153px;
}
.img-padding {
padding:0;
margin-bottom:10px;
}

HTML

<div id="left-sidebar" class="col-lg-2 col-md-2 col-sm-2 col-xs-2 no-marg-pad min-width">
<div class="row no-marg-pad">
    <div id="want-answers" class="col-xs-12">
        <p><small>18 WANT ANSWERS</small></p>
    </div>
</div>
<div class="row no-marg-pad">
    <div class="img-line">
        <div class="col-xs-3 img-padding">
            <img class="img-responsive" src="img/350x350.gif}" alt="" align="center" width="32px" height="32px" />
        </div>
        <div class="col-xs-3 img-padding">
            <img class="img-responsive" src="img/350x350.gif}" alt="" align="center" width="32px" height="32px" />
        </div>
        <div class="col-xs-3 img-padding">
            <img class="img-responsive" src="img/350x350.gif}" alt="" align="center" width="32px" height="32px" />
        </div>
        <div class="col-xs-3 img-padding">
            <img class="img-responsive" src="img/350x350.gif}" alt="" align="center" width="32px" height="32px" />
        </div>
    </div>
</div>
<div class="row no-marg-pad">
    <div class="img-line">
        <div class="col-xs-3 img-padding">
            <img class="img-responsive" src="img/350x350.gif}" alt="" align="center" width="32px" height="32px" />
        </div>
        <div class="col-xs-3 img-padding">
            <img class="img-responsive" src="img/350x350.gif}" alt="" align="center" width="32px" height="32px" />
        </div>
        <div class="col-xs-3 img-padding">
            <img class="img-responsive" src="img/350x350.gif}" alt="" align="center" width="32px" height="32px" />
        </div>
        <div class="col-xs-3 img-padding">
            <img class="img-responsive" src="img/350x350.gif}" alt="" align="center" width="32px" height="32px" />
        </div>
    </div>

Еще одна вещь, на которую вы, возможно, захотите обратить внимание, — это определение ширины столбца для экранов малого и среднего размера, например. col-sm-2 col-md-2

person Kinburn101    schedule 20.04.2015

arrow_upward
0
arrow_downward

Я не уверен, есть ли у вас пользовательский CSS для #want-answers или #left-sidebar, но одна проблема заключается в том, что изображения размером 4–32 пикселя обычно выходят за пределы ширины col-lg-2. Измените их на img-responsive, чтобы они уменьшались по мере необходимости.

<div class="col-lg-3">
   <img src="//placehold.it/350" alt="" width="32px" height="32px" class="img-responsive">
</div>

http://codeply.com/go/OtSvmYQfcX

person Zim    schedule 20.04.2015