6
votes

Articles réactifs de la même hauteur à l'intérieur de la barre NAV dans Bootstrap 3.1.1

J'ai lu des informations sur NAVBAR-NIV mais je ne l'utilise pas car elle fait une liste de mes éléments LI au lieu de la ligne.

 img sans NavBar-Nav p>

Si je veux y arriver, je devrais ajouter ce CSS P>

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->


9 commentaires

Avez-vous essayé y compris html5shiv.js et répond.js en haut de votre page?


@Simplesandman Oui, comme décrit dans Bootstrap Doc


Pouvez-vous poster votre tête et votre CSS?


@Aibrien je suis mis à jour question


Que voulez-vous dire que vous faites votre liste NAVBAR par liste au lieu de la ligne? Les éléments NAVBAR sont dans une liste. getbootstrap.com/components/#navbar C'est la bonne façon de le faire


bootply.com/jvb9pqnswz vous vraiment besoin de réparer votre code. Non seulement cela n'est pas seulement près de la façon de créer une barre NAV dans Bootstrap, vous avez inclus des images qui ne seront pas chargées ainsi que des divs vides et autres code qui ne font rien. Je recommande donc fortement de lire la documentation.


@Jordand je n'ai pas d'image vide mais je pense que cela n'influence pas sur la barre Naville C'est pourquoi je ne l'ai pas téléchargée. J'ai modifié la structure par défaut de NAVBAR, car Bootstrap ne dispose pas de colonnes sensibles de la même hauteur de la même taille.


@Jordand s'il vous plaît, pouvez-vous examiner mettre à jour ma question?


@Jordand s'il vous plaît, pouvez-vous donner une explication à ce point "Les éléments NavBar sont dans une liste". Qu'est-ce que j'ai mal fait?


4 Réponses :


0
votes

Internet Explorer n'est pas en mesure de lire les requêtes du média CSS, vous devez donc ajouter cette balise méta sur votre tête HTML:

<!--[if lt IE 9]>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->


1 commentaires

J'ai cette balise méta. Et j'ai dans le bas de la corde à répondre.js et html5smth.js après tous les fichiers CSS inclus. Maintenant, ça ne va pas bien, même en chrome. S'il vous plaît, vérifiez le lien Bootly et mes 2 dernières questions.



0
votes

Avant de travailler dans Bootstrap version 3.1.1

Vous devez être au courant de la compatibilité du navigateur et de la prise en charge de CSS3 pour Windows Explorer 8! P>


Veuillez lire: http://getbootstrap.com/geting-started/#ssupport strong> p> P>

En outre, Internet Explorer 8 nécessite l'utilisation de répond.js à Activer la prise en charge de la requête multimédia. P> blockQuote>

Voir aussi: https://github.com/scottjehl/respond Strong> p>

Pour cette raison, le modèle de base contient ces lignes dans la section de la tête: P>

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
  <script src="../../assets/js/html5shiv.js"></script>
  <script src="../../assets/js/respond.min.js"></script>
<![endif]-->


1 commentaires

J'ai lu toutes les informations de la documentation de bootstrap sur la compatibilité avec IE8: Ajouter une balise méta, inclure des fichiers JS comme réponds.js. Je suis intéressé par 2 articles communs pour tous les navigateurs. Articles réactifs de la même hauteur à l'intérieur de la forme de largeur d'étirement de la barre NAVBAR (à l'aide du groupe d'entrée non de formulaire) de telle manière que lorsque je redimensionnez le bouton de la page de descendre sur la ligne suivante



4
votes

Cet exemple est dans Bootstrap 3.2 qui a des corrections de bugs pour leurs composants, mais c'est probablement - pas le problème ici. Votre CSS est très désordonné et il est difficile de déterminer ce qui ne fonctionne pas dans IE8.

Je construirais mon propre composant et non utiliser NAVBAR, qui n'est pas destiné à être utilisé comme vous l'avez. Trop écrit n'est vraiment pas une bonne idée sans familiarité intime avec Source CSS.

Évitez les marges, comme vous l'avez, sur des éléments avec une boîte de tailles: la boîte de frontière surtout si elles essayent de s'intégrer à l'intérieur un conteneur de fluide. Vous avez des marges sur les classes col- , cela gâchera des trucs.

Screen Shot IE 8:

 Entrez la description de l'image ici

Démo: http://jsbin.com/zaxiwo/1/

Edit: http://jsbin.com/zaxiwo/1/edit

Conseils:
  1. Gardez des requêtes de média au minimum, qui utilise moins si possible.
  2. Chaque fois que vous faites un changement, même mineur, enregistrez IE8, alors vous savez ce qui s'est passé.
  3. Commentez votre HTML

    HTML: (nécessite de répondre correctement.js correctement installé dans la tête selon leurs instructions, avant CSS et hébergé localement CSS liés via un chemin relatif.)

    Notes: Le HTML et le CSS n'est pas complet, les petits styles de visualisation n'ont pas été effectués. Vous mettez le commun, partagé parmi toutes les tailles de la fenêtre avant la requête de média min-largeur. S'il est commun à tout ce qu'il va en dehors des requêtes de média, mais s'il y a une légère différence, vous pouvez enlever ce style, alors s'il y a un rembourrage sur de petits fenêtres mais aucun rembourrage sur plus grand, retirez le rembourrage sur le plus grand, mais s'il y a Une différence totale d'apparence, puis mettez les styles de SmallViewPort uniquement dans une largeur maximale, qui est 1px inférieur à la min-largeur. xxx


    CSS xxx


0 commentaires

0
votes

essayez d'importer html5-répondre.js Dans votre section de page de la page HTML, HTEN IE sera en mesure de rendre les requêtes multimédias.


0 commentaires