为什么 Bootstrap 不允许我在 ASP.NET MVC 页面中的下拉菜单上设置边距？答案

【问题标题】：Why won't Bootstrap let me set margins on dropdowns in ASP.NET MVC page?为什么 Bootstrap 不允许我在 ASP.NET MVC 页面中的下拉菜单上设置边距？
【发布时间】：2019-04-17 06:06:18
【问题描述】：

我的 ASP.NET MVC 应用程序中的 Bootstrap/CSS 存在一些问题。我有一个“表单组”，左边有一个标签，右边有一个垂直的下拉列表。

我现在已经按照我想要的方式进行了设置，除了边距。目前没有。我给的利润似乎没有效果。我几乎从 YouTube 上的视频教程中得到了这个。我不明白为什么这不起作用。

我尝试了各种方法，mb-4, mt-4, my-4, ...

我在这里做错了什么？我已经检查过我使用的是 bootstrap v3.3.7。

这是我的代码：

<div class="form-group">
    @Html.LabelFor(model => model.SelectedTags, htmlAttributes: new { @class = "control-label col-md-2", id = "lblSelectedTags" })
    <div class="col-md-10">
            @Html.DropDownListFor(model => model.Tag1, Model.AvailableTags, htmlAttributes: new { @class = "form-control mb-4", id = "ddlTag1" })
            @Html.DropDownListFor(model => model.Tag2, Model.AvailableTags, htmlAttributes: new { @class = "form-control mb-4", id = "ddlTag2" })
            @Html.DropDownListFor(model => model.Tag3, Model.AvailableTags, htmlAttributes: new { @class = "form-control mb-4", id = "ddlTag3" })
    </div>
</div>
<div class="form-group">
    @Html.LabelFor(model => model.FriendlyName, htmlAttributes: new { @class = "control-label col-md-2", id = "lblFriendlyName" })
    <div class="col-md-10">
        @Html.EditorFor(model => model.FriendlyName, new { htmlAttributes = new { @class = "form-control", id = "edrFriendlyName" } })
        @Html.ValidationMessageFor(model => model.FriendlyName, "", new { @class = "text-danger" })
    </div>
</div>

结果如下：

【问题讨论】：

引导间距仅适用于版本 4+:getbootstrap.com/docs/4.0/utilities/spacing
我正在使用 bootstrap 3.3.7，我已经标记了两者，因为只有 bootstrap-4 和 twitter-bootstrap-3 可用，我对此有点困惑，是否有显着差异?我已经重新标记了它。
是的3和4之间有显着差异：blog.templatetoaster.com/…
你的意思是class = "form-control margin-bottom-lg-4"（对不起，真的是 CSS 新手）
好的，我明白了，他们已经在 Bootstrap 4 中重命名了它。刚刚用margin-bottom 重试了它，还是一样。我已经把它包装成 div 了，但还是一样。

标签： css asp.net-mvc razor twitter-bootstrap-3

【解决方案1】：

您使用 bootstrap 3 并且在此版本中 sapcing 不可用

因此，您可以通过在 css 中创建这些类来模仿 bootstrap 版本 4 的行为

例如我通过添加到 css .mb-4 { margin-bottom: 1.5em; } 来启动 mb-4 的行为：

注意！

在 Razor 中：使用与您发布的相同的 HTML 代码，但添加 css 规则
我在 css 中使用 em 仅用于启动引导，但您可以根据需要使用 px

.mb-4 { margin-bottom: 1.5em; }

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  
<div class="form-group">
    <label class = "control-label col-md-2" id ="lblSelectedTags">drop down</label> 
    <div class="col-md-10">
            <div class = "form-control mb-4" id = "ddlTag1">
            ddlTag1
            </div>
            <div class = "form-control mb-4" id = "ddlTag2">
            ddlTag2
            </div>
             <div class = "form-control mb-4" id = "ddlTag3">
            ddlTag3
            </div>
           
    </div>
</div>

【讨论】：

再次感谢您的建议，我已尝试将其添加到我的 site.css 和 bootstrap.css 中（真的不清楚在哪里添加，因为我对 Razor 引擎如何捆绑事物的理解有限向上）。没能成功。我也对这个em 感到困惑，以前没见过。我用1.5em之类的东西和15px之类的东西尝试过，都没有奏效。 Bootstrap4 文档中的示例当然也没有帮助。
好吧...让我们把订单搞得一团糟... Bootstrap 4 决定使用em 而不是px 但你可以使用px（我使用em 只是为了模仿他们做到了）了解em:w3schools.com/cssref/css_units.asp
关于 Razor 就像您发布的代码一样，您所要做的就是添加 css 但可能是为了防止覆盖使用：!important，如下所示：.mb-4 { margin-bottom: 1.5em!important; }
好吧，我已经将渲染的 html 的单个标签粘贴到 JS fiddle 中，并添加了 CSS 部分，它就可以工作了。它必须在整个页面上被覆盖或以其他方式无效
也许为这个东西创建一个全局css并将这个全局添加到所有页面

【解决方案2】：

bootstrap 4 允许填充和边距标签：

mt-1 (margin-top) , mb-1 (margin-bottom) , mr-1 (margin-right) , ml-1 (margin-left) 可以根据需要将数字从 1-5 更改或将 M 替换为 p（填充）

至于 bootstrap 3 你需要使用 css

.form-group{
margin-bottom:10px;
}

例如

【讨论】：

【解决方案3】：

在反复无休止的反复试验之后，我发现 ASP.NET 组装 html 和样式的方式不够简单，以至于对于该技术的新手来说很容易理解。希望这可能会在一段时间后改变。

所以我偶然发现了另一个帖子 (Cant set proper margin with bootstrap css in MVC)，其他人在 ASP.NET 中遇到了边距问题。这可能不是正确的做事方式，但对我来说，现在它有效。我基本上避免在我的 CSS 文件中添加类似这样的内容

.mb-4 { margin-bottom: 1.5em !important; }

而是将它添加到我的每个控件的 Html 助手类的 htmlAttributes 集合中，如下所示：

@Html.DropDownListFor(model => model.Tag1, Model.AvailableTags, htmlAttributes: new { @class= "form-control", style = "margin-bottom: 1.5em !important;", id = "ddlTag1 " })

【讨论】：