【发布时间】：2016-08-22 21:40:32
【问题描述】：
我有一个带有引导程序的简单页面，我想在较小的屏幕上创建一个单行或两行的网格，但我总是得到一些不正确的东西：使用show-grid 选项，请参见屏幕截图 1：
Button 的 div 和 IsDescending 的 div 不会占用所有高度，所以布局看起来很丑。
所有的填充物都不见了，设计比以前更糟糕。
当所有边距正确且一切都很漂亮时，我如何才能实现像 their page 这样的行为？
我现在的标记是：
<div class="row show-grid">
<div class="col-sm-5">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Query</span>
<input asp-for="Query" type="text" class="form-control" placeholder="Query" name="query">
</div>
</div>
<div class="col-sm-5">
<div class="input-group">
<span class="input-group-addon">Language</span>
<select asp-for="Language" asp-items="@Model.Languages" name="language" class="form-control">
<option disabled>Choose language</option>
</select>
</div>
</div>
<div class="col-sm-7">
<div class="col-sm-8">
<div class="input-group">
<span class="input-group-addon">Sorting field</span>
<select asp-for="SortField" asp-items="@Model.SortFields" name="sortField" class="form-control">
<option disabled>Choose sorting field</option>
</select>
</div>
</div>
<div class="col-sm-4">
<div class="input-group">
Is Descending: <input asp-for="IsDescending" />
</div>
</div>
</div>
<div class="col-sm-1">
<button type="submit" id="searchButton" class="btn btn-default"><i class="fa fa-search fa-fw"></i></button>
</div>
</div>
【问题讨论】：
-
小提琴会很有帮助。您不应该在列中嵌套列。
-
看起来您需要更多行。每行应包含总计不超过 12 的列。很难确切知道您想要什么布局。您能描述一下您希望它的外观吗？
-
@d4rty 抱歉，我不熟悉小提琴。什么是嵌套列：想法是如果两列都可以放在第一行，它们都应该在那里，否则它们都应该放在第二行。
-
将您的代码发布到 bootply 或 fiddle 或其他东西上，以便可以看到您的代码正在运行。
标签： html css twitter-bootstrap responsive-design