problème de fond avec div

J'ai 2 différentes vues partielles que je fais appel à mon avis principal comme ceci:problème de fond avec div

<div class="col-md-6"> 
    @Html.Action("Chart", "Teams") 
</div> 

<div class="col-md-6"> 
    @Html.Action("SeriesWinsChart", "Teams") 
</div> 

<div class="next-game"> 
    <h3 class="text-center">The Next Game Is:</h3> 
</div> 
<br /> 
<div class="text-center"> 
    <h3 style="color:red;">@ViewBag.NextGame</h3> 
</div>

Maintenant, mon problème est le suivant:

Tout ce que je l'ai fait est mis background-color: green dans mon CSS pour la classe .next-game (honnêtement juste pour voir à quoi il ressemblait .. vert n'est pas ce que je vais utiliser) ... Je suis allé dans Inspecter l'élément sur IE un Je ne trouve pas le problème de savoir pourquoi l'arrière-plan est si grand. Je veux juste l'arrière-plan pour être autour Le jeu suivant est:

CSS:

.next-game{ 
    background-color: green; 
}

Comment puis-je réduire le fond? J'ai essayé width: 50%; height: 10px; //etc just to see the different changes but can't figure this out

MISE À JOUR:

J'ai changé le code HTML à:

<div class="next-game"> 
    <h3 class="text-center">The Next Game Is:</h3> 
    <div class="text-center"> 
     <h3 style="color:red;">@ViewBag.NextGame</h3> 
    </div> 
</div> 

<div class="col-md-6"> 
    @Html.Action("Chart", "Teams") 
</div> 

<div class="col-md-6"> 
    @Html.Action("SeriesWinsChart", "Teams") 
</div>

Ce au moins fait l'arrière-plan rendu correctement. Donc, cela a quelque chose à voir avec les vues partielles?

Source

2016-03-30 GTown-Coder

En regardant tous les éléments que vous avez fournis n'explique pas ce résultat. Assurez-vous qu'il n'y a rien d'autre qui pourrait avoir une incidence sur le résultat final. Nous pourrions vous aider davantage si vous incluiez toutes les parties du code qui reproduisent ce comportement. – Salketer

'col-md-6'. Utilisez-vous Twitter bootstrap par hasard? Vous devriez utiliser des lignes pour envelopper ces colonnes si c'est le cas. –

@JosephMarikle J'utilise twitter bootstrap. que voulez-vous dire en utilisant des lignes? –

La cause la plus probable de ce problème est que vos colonnes bootstrap twitter ont pas de ligne d'emballage. Vous avez généralement besoin de tous les trois (conteneur, ligne, colonne) pour le rendre correctement. Ce que vous rencontrez ici est probablement un problème de clearfix. Les colonnes sont flottantes, ce qui fait apparaître le prochain élément non flottant disponible pour les "envelopper". Voici une solution possible au problème.

<div class="container"> 
    <div class="row"> 
     <div class="col-md-6"> 
      @Html.Action("Chart", "Teams") 
     </div> 

     <div class="col-md-6"> 
      @Html.Action("SeriesWinsChart", "Teams") 
     </div> 
    </div> 
</div> 

<div class="next-game"> 
    <h3 class="text-center">The Next Game Is:</h3> 
</div> 
<br /> 
<div class="text-center"> 
    <h3 style="color:red;">@ViewBag.NextGame</h3> 
</div>

D'autres solutions comprennent l'ajout d'une classe .clearfix à une enveloppe pour les colonnes ou en ajoutant clear:both à .next-game.

Source

2016-03-30 14:41:48

En d'autres termes, le vieux problème de flotteur. Je ne sais pas pourquoi les bootstrap utilisent encore des flotteurs pour les mises en page au XXIème siècle ... –

@ MarcosPérezGude Eh bien, pour être honnête, ils passent à flex dans la prochaine version. Ils ont juste besoin de le libérer finalement. : P –

vraiment !? Les bonnes nouvelles sont eux! –

Vous devez

.next-game h3{ 
    background-color: green; 
}

(il est juste pour l'en-tête h3 dans l'élément avec cette classe .next-game)

Source

2016-03-30 14:29:59 Johannes

J'ai essayé ceci et je rends toujours le même résultat –

problème de fond avec div

Répondre

Questions connexes