如何将此 CSS 容器限制为仅包含其声明的 div？

Question

我刚刚开始将 ASP.NET MVC 应用程序中的默认 Index.cshtml 页面转换为看起来类似于现有的 Winforms 应用程序，我需要做的第一件事就是呈现看起来像就像一个 CheckedListbox。我发现似乎是一个很好的解决方案 here 并将其逐字添加到我的 \Content\Site.css 文件中：

.container { border:2px solid #ccc; width:300px; height: 100px; overflow-y: scroll; }

我的 \Views\Home\Index.cshtml 现在是（完整的，仍然包含一些 default/boilerplate html）这个：

@{
    ViewBag.Title = "Home Page";
}

<div class="jumbotron">
    <h1>Report Scheduler</h1>
</div>

<div class="row">
    <div class="col-md-6">
        <h2>Configure One Unit/Report pair at a time</h2>
        <div class="container">
            <input type="checkbox" /> This is checkbox <br />
            <input type="checkbox" /> This is checkbox <br />
            <input type="checkbox" /> This is checkbox <br />
            <input type="checkbox" /> This is checkbox <br />
            <input type="checkbox" /> This is checkbox <br />
            <input type="checkbox" /> This is checkbox <br />
            <input type="checkbox" /> This is checkbox <br />
            <input type="checkbox" /> This is checkbox <br />
            <input type="checkbox" /> This is checkbox <br />
            <input type="checkbox" /> This is checkbox <br />
        </div>
        <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301865">Learn more &raquo;</a></p>
    </div>
    <div class="col-md-6">
        <h2>Get more libraries</h2>
        <p>NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects.</p>
        <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301866">Learn more &raquo;</a></p>
    </div>
</div>

所以我将新的 CSS class 分配给包含复选框的 div，但容器样式似乎应用于整个页面：

我需要做什么才能让 CSS class ("container") 只包含复选框，而不是整个页面？

更新

为了回答 TaylorN 的问题，\Content\bootstrap 中有一堆 Jumbotron 的东西。css:

.jumbotron {
  padding: 30px;
  margin-bottom: 30px;
  font-size: 21px;
  font-weight: 200;
  line-height: 2.1428571435;
  color: inherit;
  background-color: #eeeeee;
}

.jumbotron h1 {
  line-height: 1;
  color: inherit;
}

.jumbotron p {
  line-height: 1.4;
}

.container .jumbotron {
  border-radius: 6px;
}

@media screen and (min-width: 768px) {
  .jumbotron {
    padding-top: 48px;
    padding-bottom: 48px;
  }
  .container .jumbotron {
    padding-right: 60px;
    padding-left: 60px;
  }
  .jumbotron h1 {
    font-size: 63px;
  }
}

...行有这个：

.row {
  margin-right: -15px;
  margin-left: -15px;
}

.row:before,
.row:after {
  display: table;
  content: " ";
}

.row:after {
  clear: both;
}

.row:before,
.row:after {
  display: table;
  content: " ";
}

.row:after {
  clear: both;
}

....col-md-6 是：

.col-md-6 {
    width: 50%;
  }

更新 2

如果我删除容器 class 的所有痕迹，它会按预期工作：

...但我仍然更喜欢这样那样绑定复选框。

Answer 1

我建议尝试这个，因为它不会越界

overflow: hidden;

将其放入您的 div css class

Answer 2

您的 CSS 以下内容是什么？

.jumbotron
.行
.col-md-6

编辑：

您有 .col-md-6 的相对宽度

.col-md-6 {
    width: 50%;
  }

但是 .container 的绝对宽度

.container { border:2px solid #ccc; width:300px; height: 100px; overflow-y: scroll; }

尝试：

.container { border:2px solid #ccc; width:100%; height: 100%; overflow-y: scroll; }

此外，或许也可以试试 Jacob 的建议：

.container { border:2px solid #ccc; width:100%; height: 100%; overflow: hidden;

Answer 3

我在 JSfiddle 中检查了你的整个代码，它可以正常工作。

.container {
 border: 2px solid #ccc;
 width: 300px;
 height: 100px;
 overflow-y: scroll;
 background:green;  /* added this just to see if there any nuances */ 
}

但是您是否像

那样链接了您的 css 文件

<link rel="stylesheet" href="/somename.css">

到index.cshtml??

.容器 > 复选框 { ………… }

如何将此 CSS 容器限制为仅包含其声明的 div？

How can I restrict this CSS container to only containing the div its declared in?

html

css

asp.net-mvc

overflow

razor

更新

更新 2