如何将此 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 现在（整体上，仍然包含一些默认/样板 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 类分配给包含复选框的 div，但容器样式似乎应用于整个页面：

我需要做什么才能让 CSS 类（“容器”）只包含复选框，而不是整个页面？

更新

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

.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

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

...但我还是更喜欢这样绑定复选框。

Answer 1

我建议尝试一下，因为它不会越界

overflow: hidden;

把它放在你的 divs css 类中

Answer 2

你的 CSS 中有什么用于下面的内容？

• .jumbotron
• .row
• .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 ??

.container > 复选框 { ............ }