Primordial Bootstrap 3 Questions Des Médias

Comment remplacer une requête de média sur Bootstrap 3?

Par exemple, j'ai ma feuille de style personnalisée et je veux remplacer une requête de média qui est de min-width: 768px pour un min-width: 1200px.

Chaque fois que je fais qu'il ne veut pas appliquer les paramètres. Cependant si je change que la requête de média sur Bootstrap, propre fichier css, puis il travaille!

Pour plus de précisions:

bootstrap.css:

@media (min-width: 768px) {
  .navbar-header {
    float: left;
  }
}

Mon custom.css:

@media (min-width: 1200px) {
 .navbar-header {
 float: left;
 }
}

Merci de m'aider.

lorsque vous utilisez @media (min-width: 1200px) cela ne fera que remplacer les styles pour les appareils de la largeur au-dessus de 1200px.

OriginalL'auteur Quentin Gérard | 2014-03-30

  1. 4

    Lorsque vous utilisez bootstrap css, ils l'ont défini comme:

    @media (min-width: 768px) {
  .navbar-header {
    float: left;
  }
}

    Donc il va toujours appliquer cette règle css quand il est au-dessus ou à que la largeur de l'768, même si vous appliquez la règle de votre média 1200 après le fait. C'est parce que vous n'êtes jamais substitution de la règle précédente, vous êtes simplement l'ajout d'un nouveau point d'arrêt.

    À défaut de priorité bootstrap règle d'utiliser quelque chose comme:

    @media (min-width: 768px) {
  .navbar-header {
    float: none;
  }
}

    Dans votre propre coutume.fichier css, (bien sûr, assurez-vous d'inclure votre personnalisé.fichier css après bootstrap.css pour faire de la coutume charger la dernière).

    OriginalL'auteur javaBean007

  2. 1

    Si je vous comprends bien, vous voulez l'en-tête de flotter à 1200px et pas à 768px, droit?
    Si vous utilisez ce:

    @media (min-width: 768px) {
 .navbar-header {
  float: initial;
 }
}

    de rendre le paramètre de 768px inefficace et puis il suffit de définir l'1200px

    @media (min-width: 1200px) {
 .navbar-header {
 float: left;
 }
}

    J'espère que j'ai bien compris votre question de droit!

    OriginalL'auteur René Roth

  3. 1

    Je recommanderais substituant les suivantes les variables.moins dans le Bootstrap source à quelque chose comme ceci:

    @grid-float-breakpoint: @screen-lg;

    Si vous écrivez vos styles en MOINS déjà, inclure votre propre custom.less fichier après la vanille bootstrap.less puis lors de la compilation, les variables définies plus tard, aura préséance.

    Ou, copiez le @import déclarations de bootstrap.moins directement dans votre propre custom.less, mettre à jour les chemins d'accès de votre environnement, (ie. @import: "../node_modules/bootstrap/less/normalize.less";) commentez les modules que vous n'avez pas besoin, puis compilez votre propre... Pour encore plus maigre CSS sortie!

    - Je utiliser Nœud, Grunt grunt-contrib-less pour automatiser ces tâches.

    OriginalL'auteur D. Starr