我正在尝试使用Bootstrap创建响应式表单。
当页面宽度为medium
时,我希望日期范围控件共享同一行:
问题是 - 如果我将Start
和End
置于同一表单组中,则在单独的行中它不会很好地隔离:
<小时/> 但是,如果我将
Start
和End
放在不同的表单组中,即使屏幕很宽,它们也总是在不同的行上。
bootstrap是否提供了解决此问题的方法,或者我是否必须编写自己的自定义样式规则?
以下是完整的代码:
http://plnkr.co/edit/XZYEU73ov7BBaMQmO7ec?p=preview
<form class="form-horizontal">
<div class="row">
<div class="col-xs-12 col-sm-8 col-md-8">
<div class="form-group">
<label class="col-sm-2 control-label">
Video
</label>
<div class="col-sm-10">
<input class="form-control" type="text" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">
Start
</label>
<div class="col-sm-10 col-md-4">
<input class="form-control" type="date" />
</div>
<!-- If I start a new form group here, it forces a new line -->
<label class="col-sm-2 control-label">
End
</label>
<div class="col-sm-10 col-md-4">
<input class="form-control" type="date" />
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4 col-md-4">
<button class="btn btn-primary">
Generate Report
</button>
</div>
</div>
</form>
答案 0 :(得分:1)
您可以添加一个自定义CSS类,并将其添加到您想要的边距(根据需要更改最大宽度)。
@media all and (max-width: 991px){
.margin-bottom {
margin-bottom:15px;
}
}
答案 1 :(得分:0)
如果您在http://plnkr.co/edit/XZYEU73ov7BBaMQmO7ec?p=preview中使用示例1,请使用以下CSS进行响应式视图:
@media all and (max-width: 991px){
.col-sm-10{
margin-bottom: 15px;
}
}