NCNecros
@NCNecros

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

Есть у меня верстка такая
<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 опять уходит под вторую колонку.
  • Вопрос задан
  • 9498 просмотров
Решения вопроса 1
iiil
@iiil
Инженер и вэб-дизайнер, рисую.
Ваш вопрос должен звучать вот как:
Меня не устраивает размер сетки бутстрап, в общем-то все хорошо, но когда дело доходит до баннеров, они или не влезают в отведенное место, или наоборот, остается свободное пространство справа.

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

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы