Как изменить размер колонки в bootsrap3?

Question

[Stanisav]

Есть у меня верстка такая

<div class="container">
        <!--Шапка сайта-->
        <div class="row">
            <div class="col-md-12 header">
                <img src="/images/p1.jpg">
            </div>
        </div>
        <!--Контент-->
        <div class="row">
            <!--Боковые ссылки(оглавление)-->
            <div class="row">
                <div class="col-md-2 col-sm-2 col-xs-2 menu">
                    <ul class="list-group">
                        <li class="list-group-item">Пункт 1</li>
                        <li class="list-group-item">Пункт 2</li>
                        <li class="list-group-item">Пункт 3</li>
                        <li class="list-group-item">Пункт 4</li>
                        <li class="list-group-item">Пункт 5</li>
                    </ul>
                </div>
                <!--Контент-->
                <div class="col-md-8 col-sm-8 col-xs-8 content">
                    <div class="row">
                        <div class="col-md-12">Новость 1</div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">Новость 2</div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">Новость 3</div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">Новость 4</div>
                    </div>
                </div>
                <!--Правые ссылки-->
                <div class="col-md-2col-sm-2 col-xs-2 links">
                    <div class="row">
                        <!-- Реклама чего-то-->
                        <div class="col-md-12">
                            <div>
                                <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" id="site" align="middle" height="100" width="240">
                                    <param name="allowScriptAccess" value="sameDomain">
                                    <param name="movie" value="http://somesite.ru/upload/medialibrary/094/240x100.swf">
                                    <param name="quality" value="high">
                                        <param name="bgcolor" value="#ffffff">
                                    <embed src="http://somesite.ru/upload/medialibrary/094/240x100.swf" quality="high" bgcolor="#cccccc" name="" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" align="middle" height="100" width="240">
                                </object>
                                <br>
                            </div>
                        </div>
                        <!--Реклама чего-то-->
                        <div class="col-md-12">
                            <a href="http://something.ru/">
                                <img src="/images/somegif.gif" alt="" height="100" width="240">
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--Футер-->
    <div class="row"></div>
    </div>

При таком разбиении на колонки баннеры вылазят за правую границу контейнера и в браузере появляется полоса горизонтальной прокрутки. Попытки установить в css ширину колонки через .links { width: 240px;} приводит к тому что третья колонка уходит под вторую. Если поменять разбиение с 2-8-2 на 2-7-3, то остается пустое место справа от баннеров. Если при разбиении 2-7-3 установить .links {width: 240px;}, то колонка становится 240px и при разных размерах экрана то выглядит хорошо, то остается место справа, и при размерах экрана меньше 1000px опять уходит под вторую колонку.

Answer 1

[Юрий Лобанов]

Ваш вопрос должен звучать вот как:
Меня не устраивает размер сетки бутстрап, в общем-то все хорошо, но когда дело доходит до баннеров, они или не влезают в отведенное место, или наоборот, остается свободное пространство справа.

И ответы на такой вопрос:
1. не используйте сетку бутстрап вообще
2. не используйте ее конкретно в для этого блока.
3. Еще один вариант — изменить стандартную сетку бутстрап на сайте на свои размеры.
4. Изменить размеры баннеров под размер сетки бутстрап.

А Вы делаете все очень в лоб, недостаточно просто изменить размер одного свойства или прописать свой класс, скачайте с сайта бутстрап одну только сетку и посмотрите сколько там всего прописано для этого.

Comments

[Stanisav]

Спасибо. Пытаюсь в качестве обучения верстке переверстать рабочий сайт, вот и скачу галопом по граблям :)

[Юрий Лобанов]

@NCNecros итак, чем все закончилось, что решили?

[Stanisav]

Решил что отступы не такие уж и большие получаются, что и так сойдет.

[Юрий Лобанов]

@NCNecros и правильно. Не стоит рушить сетку ради одного блока. Ведь сетка — это не только способ внутренней организации, но и способ визуального отображения, она вносит порядок в представление контента.
Если какой-то элемент рушит сетку, всегда есть способы его подогнать под нее, не перерисовывая. К примеру, Вы можете Ваш баннер поместить в прямоугольник с однородной или градиентной заливкой и выровнять по центру. Главное, чтобы заливка не была слишком яркой и не выглядела как рамка. Детальнее можно говорить только если видеть ситуацию.

[Stanisav]

@iiil А что-то хорошее по верстке можете посоветовать?

[Юрий Лобанов]

@NCNecros что-то хорошее — это что? И что Вы под версткой понимаете? Если клепать шаблоны для сайтов — то это самое простое в верстке.

Answer 2

[zugo]

Bootstrap можно кастомизировать. Задаете нужные значения основных переменных - и он компилируется.
Можно изменить ширину колонки, контейнера, да, в принципе, почти что угодно. Кроме того, можете скачать исходники (он написан с использованием LESS), изменить в них что вам нужно, и скомпилировать самостоятельно (это даст еще большую свободу действий).