web-dev-qa-db-fra.com

Comment désactiver complètement la fonction responsive depuis Twitter Bootstrap 3?

Comment désactiver la réactivité dans Bootstrap 3?

Je veux juste développer une version de bureau et lorsque la taille est différente, elle devrait toujours apparaître comme la version de bureau.

Twitter.com fait cela. Si vous essayez de redimensionner, rien ne se passe dans l'interface utilisateur pendant que mon site redessine tous les éléments.

Exemple de comment je le veux: enter image description here

Quoi qu'il en soit maintenant, comment désactiver la réactivité? Toute aide appréciée.

Lisez également récemment que dans Bootstrap 2.0, vous supprimez simplement le boostrap CSS réactif, mais dans 3.0, il est cuit dans un fichier css.

Merci.

twitter-bootstrapresponsive-designtwitter-bootstrap-3
20
user023

EDIT: Mon code ci-dessous a été écrit pour la v3.0.0RC2, mais dans la v3.0.0, les docs ont une section spécifiquement consacrée à cette question: http://getbootstrap.com/getting-started/#disable-responsive

Utilisez le col-xs-X classes car ce sont des largeurs en pourcentage constantes. Ensuite, la réactivité vient de .container en utilisant max-width à différentes tailles de support. Vous pouvez définir votre propre alternative à .container et utilisez tout le reste comme d'habitude:

Violon pour l'exemple ci-dessous: 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;
}
46
Ross Allen

Voici ce qui a fonctionné pour moi:

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

Je voulais un peu de marge sur mon contenu, donc je l'ai aussi fait

.container{
  width: 1150px !important;
}

Testé sur iPad et iPhone.

12
machineboy2045

J'aime la solution (acceptée) de @ ssorallen . Cette solution ne désactive pas toutes les fonctionnalités réactives comme demandé.

Le @grid-float-breakpoint (par défaut à 768 pixels) laissera votre menu s'effondrer et définira l'alignement des étiquettes de formulaire en fonction de la largeur de l'écran. La largeur de vos modaux et carrousels dépend également de ce paramètre.

Pour plus d'informations, voir: http://bassjobsen.weblogs.fm/compile-twitters-bootstrap-3-without-responsive-features/

mise à jour consultez également le lien ci-dessous de @skelly. Notez que cela ne change toujours pas le point d'arrêt de la grille flottante et que cette solution ne réduit pas le code. D'autres versions de TB3 diviseront quelques fichiers en moins peut-être. Cela facilitera la compilation d'une version non réactive.

1
Bass Jobsen

Recherchez simplement désactiver toutes les requêtes multimédias et commentez-les dans le fichier bootstrap.css. Cela ne prend pas plus de quelques minutes.

Ensuite, vous devez définir une largeur fixe pour le div externe qui définit le contenu de votre page. Il s'agit généralement de .container dans bootstrap ou quelque chose comme #wrapper est également courant. 960px ou ce qui convient à votre site.

Vous devez également supprimer ou commenter la balise meta viewport dans votre tête HTML. S'il n'y en a pas, c'est bien aussi (bien que vous deviez en ajouter un pour le rendre réactif). Cela ressemble à ceci:

1
Sharma