Question

我正在使用bootstrap创建一个简单的ASP.net MVC表单。我的表格如下：

@using(Html.BeginForm()){
    <div class="row">
        <div class="col-md-4">@Html.TextBox("City", "", new { placeholder = "City" })</div>
        <div class="col-md-4">@Html.TextBox("State", "", new { placeholder = "State", maxlength = "2" })</div>
        <div class="col-md-4">@Html.TextBox("Zip", "", new { placeholder = "Zip Code" })</div>
    </div>
}

虽然我对列和文本框使用适当的类应该是内联的，但它们出现在不同的行中。据我了解，只要列宽度在12列的限制范围内，内联元素就应该出现在同一行中。为什么这些元素之间存在换行符？

N.B：如果我删除单个列的div并将所有文本框放在一个div中，它们会正确显示在同一行中。

Answer 1

根据我的理解，只要列宽度在一个限制范围内在12列中，内联元素应出现在同一行中。

col-md-x 的截止值为970px。这意味着如果浏览器大小小于970px，它们将呈现为单独的行。您可以阅读here。

如果始终希望他们将它们显示在一行中，您希望使用 col-xs-x ，或者混合使用类像这样 -

<div class="row">
   <div class="col-sm-4 col-xs-12"></div>
   <div class="col-sm-4 col-xs-12"></div>
   <div class="col-sm-4 col-xs-12"></div>
</div>

Answer 2

如果您希望文本框内联，则应将它们放在单个div标签内。但是如果你想把它放在不同的div中，你可以尝试删除＆＃34; col-md-4＆＃34;在您的div中并使用css代替，如下所示：

.row {
   display: flex;
}

另外，添加一些额外的＆＃34;填充＆＃34;或＆＃34;保证金＆＃34;这些文本框之间的间距属性。

如果我的回答有任何问题，请随时纠正。谢谢！

ASP.net MVC - 为什么不同行上的每个元素？

2 个答案: