Отключить ОДИН из ответных макетов Bootstrap Twitter

Ответ 1

Если вы компилируете файлы LESS, это довольно просто. Откройте responsive.less и в разделе "MEDIA QUERIES" закомментируйте или удалите объявление @import для любого макета, который вы не хотите. Например, если вы не хотите, чтобы планшеты были обычными рабочими столами, код выглядел бы так:

// MEDIA QUERIES
// ------------------

// Phones to portrait tablets and narrow desktops
@import "responsive-767px-max.less";

// Tablets to regular desktops
// @import "responsive-768px-979px.less"; // commented this out because I don't like it

// Large desktops
@import "responsive-1200px-min.less";

После этого просто перекомпилируйте bootstrap.less, и вы должны сделать.

Если, с другой стороны, вы не компилируете из bootstrap.less и используете bootstrap-responsive.css напрямую, вы можете искать медиа-запрос для конкретного устройства и удалять/комментировать этот раздел.

Например, удаление портретного планшета будет выглядеть как (bootstrap-responsive.css):

/* some CSS code above this */

.hidden-desktop {
  display: none !important;
}

/* comment out the following rule entirely in order to disable it */
/*
@media (max-width: 767px) {
  .visible-phone {
    display: inherit !important;
  }
  .hidden-phone {
    display: none !important;
  }
  .hidden-desktop {
    display: inherit !important;
  }
  .visible-desktop {
    display: none !important;
  }
}*/ /* stop commenting out, we want everything below this */

@media (min-width: 768px) and (max-width: 979px) {
  .visible-tablet {
    display: inherit !important;
  }

/* More CSS code follows */

Чтобы узнать, какой запрос @media соответствует той ширине устройства, посмотрите http://twitter.github.com/bootstrap/scaffolding.html#responsive; медиа-запросы даются там вместе с размерами устройств, которым они соответствуют.

Ответ 2

В качестве улучшения для spinningarrow способ сделать это при использовании LESS - установить @gridColumnWidth768 и @gridGutterWidth768 в соответствие с @gridColumnWidth и @gridGutterWidth вот так:

@gridColumnWidth768: @gridColumnWidth;
@gridGutterWidth768: @gridGutterWidth;

Как правило, я стараюсь оставлять одни файлы поставщиков и редактировать их только в крайнем случае. Это позволяет мне исправить эту проблему без необходимости редактировать файлы начальной загрузки.

Ответ 3

• вызов вашего css после вызова начальной загрузки.
• В вашей css скопируйте строку, span css, создайте макет, который хотите, и поместите его в свой CSS.
• измените медиа-запрос на что-то вроде этого (максимальная ширина - это ширина, которую вы хотите придерживаться):

@media (max-width: 1200px) {
    .row {
        margin-left: -30px;
        *zoom: 1;
    }
    .row:before,
    .row:after {
        display: table;
        content: "";
        line-height: 0;
    }
    .row:after {
        clear: both;
    }
    [class*="span"] {
        float: left;
        margin-left: 30px;
    }
    .container,
    .navbar-static-top .container,
    .navbar-fixed-top .container,
    .navbar-fixed-bottom .container {
        width: 1170px;
    }
    .span12 {
        width: 1170px;
    }
    .span11 {
        width: 1070px;
    }
    .span10 {
        width: 970px;
    }
    .span9 {
        width: 870px;
    }
    .span8 {
        width: 770px;
    }
    .span7 {
        width: 670px;
    }
    .span6 {
        width: 570px;
    }
    .span5 {
        width: 470px;
    }
    .span4 {
        width: 370px;
    }
    .span3 {
        width: 270px;
    }
    .span2 {
        width: 170px;
    }
    .span1 {
        width: 70px;
    }
    .offset12 {
        margin-left: 1230px;
    }
    .offset11 {
        margin-left: 1130px;
    }
    .offset10 {
        margin-left: 1030px;
    }
    .offset9 {
        margin-left: 930px;
    }
    .offset8 {
        margin-left: 830px;
    }
    .offset7 {
        margin-left: 730px;
    }
    .offset6 {
        margin-left: 630px;
    }
    .offset5 {
        margin-left: 530px;
    }
    .offset4 {
        margin-left: 430px;
    }
    .offset3 {
        margin-left: 330px;
    }
    .offset2 {
        margin-left: 230px;
    }
    .offset1 {
        margin-left: 130px;
    }
}

Ответ 4

Если вы не компилируете LESS, лучший способ, который я нашел, входит в bootstrap.css и комментирует размер, который вам не нужен. CSS довольно хорошо организован, и отключить один из размеров не влияет ни на что другое.

(Конечно, вы должны быть осторожны, чтобы не обновлять их при обновлении Bootstrap.)