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中（老实说只是为了看看它是什么样的......绿色不是我要用的东西）......我已经进入IE上的 Inspect Element ，我找不到背景为何如此之大的问题。我只想让背景围绕下一个游戏是：

CSS：

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

如何缩小背景？我试过了width: 50%; height: 10px; //etc just to see the different changes but can't figure this out

更新：

我已将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引导列没有包装行。您通常需要所有三个（容器，行，列）才能正确呈现。你在这里遇到的可能是一个明确的问题。列是浮动的，这使得下一个可用的非浮动元素看起来“包裹”它们。以下是该问题的可能解决方案。

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

（它仅适用于具有该类.next-game的元素内的标题h3）