фона проблема с DIV

Question

У меня есть 2 различных частичный вид, что я звоню в моей основной точки зрения, как это:

<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> 

Теперь моя проблема заключается в следующем:

Все, что я сделал помещен background-color: green в мой CSS для класса .next-game (честно, просто чтобы посмотреть, как это выглядит .. зеленый не то, что я собираюсь использовать) ... Я пошел в Inspect Element на IE a nd Я не могу найти проблему, почему фон настолько велик. Я просто хочу, чтобы фон, чтобы быть вокруг следующая игра:

CSS:

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

Как уменьшить фон? Я попытался width: 50%; height: 10px; //etc just to see the different changes but can't figure this out

UPDATE:

Я изменил 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> 

Это, по крайней мере, сделал фон делает правильно. Итак, это как-то связано с частичными представлениями?

Answer 1

Наиболее вероятная причиной этой проблемы является то, что ваши Twitter Bootstrap колонки не имеет оберточную строки. Обычно вам нужно, чтобы все три (контейнер, строка, столбец) отображались правильно. То, что вы используете здесь, вероятно, является проблемой clearfix. Столбцы плавают, что делает следующий доступный неплавающий элемент «обертыванием». Ниже приведено возможное решение проблемы.

<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> 

Другие решения включают в себя добавление .clearfix класс обертки для столбцов или добавления clear:both к .next-game.

Answer 2

Вам нужно

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

(это только для h3 заголовка внутри элемента с этим классом .next-game)