Jak całkowicie wyłączyć funkcję reagowania na Twitterze Bootstrap 3?

Question

Jak wyłączyć reakcję w Bootstrap 3?

Chcę tylko opracować wersję na komputery, a gdy rozmiar jest inny, powinien wyglądać jak wersja na komputery.

Twitter.com to robi. Jeśli spróbujesz zmienić rozmiar, nic się nie dzieje z interfejsem użytkownika, podczas gdy moja witryna zmienia wszystkie elementy.

Przykład jak chcę go:

Zresztą teraz, jak wyłączyć responiveness? Cała pomoc doceniona.

Niedawno przeczytałem, że w Bootstrap 2.0 po prostu usuwasz CSS CSR, ale w wersji 3.0, zapakowany w jeden plik CSS.

Dzięki.

Answer 1

EDIT: Mój kod poniżej został napisany dla v3.0.0RC2, ale w v3.0.0 docs dostał sekcję konkretnie o to pytanie: http://getbootstrap.com/getting-started/#disable-responsive

obsługi col-xs-X zajęcia, ponieważ są one stałe szerokości procentowe. Następnie czas reakcji wynosi .container przy użyciu max-width przy różnych rozmiarach nośników. Można zdefiniować własną alternatywę .container i używać wszystkiego innego jak normalne:

Fiddle na poniższym przykładzie: http://jsfiddle.net/xTePL/

HTML:

<!-- Don't use .container at all or you will have to 
    override a lot of responsive styles. --> 
<div class="container-non-responsive"> 
    <div class="row"> 
    <div class="col-xs-4"> 
     <h1>Welcome to Non-responsive Land</h1> 
    </div> 
    <div class="col-xs-8"> 
     <!-- More content, more content --> 
    </div> 
    </div> 
</div> 

CSS:

.container-non-responsive { 
    /* Margin/padding copied from Bootstrap */ 
    margin-left: auto; 
    margin-right: auto; 
    padding-left: 15px; 
    padding-right: 15px; 

    /* Set width to your desired site width */ 
    width: 1170px; 
} 

Answer 2

lubię (przyjęte) rozwiązanie z @ssorallen. To rozwiązanie nie wyłącza wszystkich funkcji responsywnych na żądanie.

Ustawienie @grid-float-breakpoint (domyślnie na 768px) spowoduje zwinięcie menu i ustawienie wyrównania etykiet formularzy na podstawie szerokości ekranu. Szerokość modów i karuzel zależy również od tego ustawienia.

Aby uzyskać więcej informacji, patrz: http://bassjobsen.weblogs.fm/compile-twitters-bootstrap-3-without-responsive-features/

aktualizacja sprawdzić link poniżej z @skelly też. Zauważ, że nadal nie zmienia to punktu przerwania siatki i to rozwiązanie nie zmniejsza kodu. Inne wersje TB3 mogą być split up some less files. Ułatwi to skompilowanie nie reagującej wersji.

Answer 3

Po prostu wyszukaj wyłączenie wszystkich zapytań o media i skomentuj je w pliku bootstrap.css. To nie zajmuje więcej niż kilka minut.

Następnie należy ustawić stałą szerokość do zewnętrznego elementu div, który określa treść strony. Zazwyczaj jest to .container w bootstrap lub coś takiego jak #wrapper jest również powszechne. 960px lub co kiedykolwiek jest odpowiednie dla Twojej witryny.

Musisz również usunąć lub skomentować znacznik meta viewport w nagłówku HTML. Jeśli go nie ma, to też jest w porządku (chociaż musisz go dodać, jeśli chcesz, aby był responsywny).Wygląda to tak:

Answer 4

Oto co pracował dla mnie:

<meta name='viewport' content='width=1190'> 

Chciałem trochę marginesem wokół mojego zawartości więc ja też nie

.container{ 
    width: 1150px !important; 
} 

Przetestowano go na iPad i iPhone.