J'ai une ligne de classe de conteneur à l'intérieur de laquelle se trouvent deux colonnes col-md-6 chacune. Les colonnes en chrome sont correctes mais dans IE 11 la colonne de droite vient sous la colonne de gauche. Comment pouvons-nous résoudre ce problème? Ce problème est uniquement dans IE. Pour vérifier les résultats complets, veuillez cliquer [ici]: http://risalat1.com/projects/accordv1/ cela, j'ai essayé d'ajouter une balise meta dans l'en-tête Compatible X-UA mais n'a pas fonctionné en conséquence Voici l'image de chrome.
Les résultats dans Internet Explorer 11 donnent ce qui suit
<div class="common top_bar"> <div class="container"> <div class="row"> <div class="col-md-6"> <span class="header_no">092093090</span> <span class="header_email">email@example</span> </div> <div class="col-md-6"> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </div> </div> </div> </div>
.top_bar{
background: #67c152;
padding-top: 10px;
padding-bottom: 10px;
}
.top_bar ul{
text-align: right;
margin-top:-4px;
}
.top_bar ul li:first-child a {
margin-right: 10px;
}
.top_bar ul li a {
margin-top: 3px;
display: block;
}
.top_bar span{
font-family:"Lato-Light";
font-size: 18px;
color: white;
font-weight: normal;
padding-left: 30px;
}
.top_bar span:first-child{
margin-right: 35px;
}
<div class="common top_bar">
<div class="container">
<div class="row">
<div class="col-md-6">
<span class="header_no"></span>
<span class="header_email"></span>
</div>
<div class="col-md-6">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
</div>
3 Réponses :
Vous devriez essayer d'utiliser des exemples BS comme base, puis ajuster les couleurs, etc. à votre guise. Cette page contient de nombreux exemples des principales barres de navigation. Vous pouvez facilement ajouter et soustraire des classes à changer la position fixe, la couleur d'arrière-plan etc.
Vous pouvez également utiliser marges et rembourrage BS plutôt que d'ajouter du travail supplémentaire pour toi même.
En gros, utilisez BS autant que possible pour faire ce dont vous avez besoin.
la classe de ligne a max-width: 100% quand je supprime que tout est bon. comment remplacer cette largeur maximale?
C'est aussi mon approche. Utilisez les styles / la mise en page standard de bootstrap pour créer votre contenu, autant que possible. Puis continuez en ajustant les styles à votre goût. Si vous testez chaque ajustement au fur et à mesure, vous saurez exactement ce qui a cassé la mise en page lorsque cela se produit.
Ce n'est pas un très gros code html et en plus ce n'est pas la réponse appropriée quel est le standard de bootstrap le standard est déjà appliqué ce qui manque dans le code selon BS.
<div class="col-md-6" style="float:left"> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </div>
<style>
.top_bar ul{
text-align: right;
margin-top:-4px;
width:100%;
}
.top_bar ul li{
display:inline-block;
}
</style>
N'a pas fonctionné en conséquence. En fait, la ligne BS a une largeur maximale: 100%; quand je supprime ça, tout va bien.
D'après les résultats de mes tests, ressemble à Ms-flex et flex créant ce problème.
Si vous le supprimez, il peut afficher le menu correctement.
qu'en est-il de la ligne: max-width: 100% ;?
On dirait que IE a un problème avec flex.Il n'est pas capable de calculer la taille correctement. Vous parlez de la largeur maximale de la ligne qui est de 100%. Je n'y ai apporté aucun changement. Si vous vérifiez la largeur de col-md-6, vous remarquerez qu'elle est de 50%. Pour résoudre le problème, vous pouvez supprimer le flex ou essayer d'utiliser n'importe quelle alternative.
si je supprime cette largeur maximale, tous les problèmes liés à cela résolus en supprimant uniquement flex de col-md-6 résolvent le problème principal de l'en-tête mais ne résolvent pas le reste de la page Web
Quel autre problème de page Web? Vous ne l'avez pas mentionné auparavant. Veuillez essayer de fournir des informations détaillées sur le problème. Cela peut nous aider à mieux comprendre le problème.
D'autres problèmes signifient que le col-md-6 est le même n'importe où dans cette page Web. Vous pouvez la section au-dessus du pied de page de la section Get Social descend.
Si la largeur maximale est également ajoutée par Bootstrap, vous ne pourrez pas non plus la supprimer spécifiquement pour IE. Je vous suggère de fournir un commentaire à BootStrap concernant ce problème. Parce que les styles sont ajoutés par sa bibliothèque qui a un problème avec IE. Les nouvelles mises à jour de fonctionnalités pour IE ont déjà été arrêtées par Microsoft. Ainsi, aucune nouvelle mise à jour ne sera fournie avec le correctif et nous ne sommes donc pas en mesure de résoudre ce problème du côté d'IE.
J'essaie d'exécuter votre code ci-dessus dans IE et Chrome et j'ai obtenu des résultats similaires dans les deux navigateurs. imgur.com/a/a4n11MR Est-ce le résultat attendu? Si non, essayez de fournir un exemple qui peut produire le problème avec IE 11. nous essaierons à nouveau de faire un test pour produire le problème. Merci pour votre compréhension.
La classe col-md-6 a max-width: 100%; lorsque je supprime cette largeur des éléments inspectés, tout semble bien comment remplacer cette largeur maximale
Il semble que votre code soit légèrement différent du code publié ci-dessus. Les résultats de nos tests sont donc différents. De mon côté, col-md-6 n'a pas de largeur max: 100%. Il a une largeur: 50%. Il vaut donc mieux que vous publiez ce code. Cela peut aider à affiner le problème.
ok vérifions le lien risalat1.com/projects/accordv1
Avez-vous obtenu les vrais résultats maintenant à partir du lien ci-dessus