我想要一个占据整个宽度的内联 Bootstrap 4 表单(输入和按钮之间没有空格):
- 1 个输入类型文本和 1 个按钮在超小型设备中
- 2 个输入类型文本和 1 个按钮在小型设备中
- 3 个输入类型文本和 1 个按钮在中型和大型设备中
但它不适用于下面的代码。不知道是不是因为窗体打开和关闭的地方。这是示例: https://jsfiddle.net/o8jzq00f/1/
HTML:
<div class="container-fluid bg-success">
<div class="row no-gutters justify-content-center" style="background-color: orange">
<div class="col-xs-12">
<h1 class="m-3">Title</h1>
</div>
</div>
<div class="row no-gutters justify-content-center">
<form>
<div class="col-xs-10 col-sm-4 col-md-3">
<label class="sr-only" for="inlineFormInput">Name</label>
<input type="text" class="form-control" id="inlineFormInput" placeholder="Jane Doe">
</div>
<div class="col-sm-4 col-md-3 hidden-xs-up">
<label class="sr-only" for="inlineFormInput">Name</label>
<input type="text" class="form-control" id="inlineFormInput" placeholder="Jon Doe">
</div>
<div class="col-sm-4 col-md-3 hidden-md-up">
<label class="sr-only" for="inlineFormInput">Name</label>
<input type="text" class="form-control" id="inlineFormInput" placeholder="Jon Doe">
</div>
<div class="col-xs-2 col-sm-4 col-md-3">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
</div>
最佳答案
使用 row
类绑定(bind)你的专栏然后它会工作
<div class="row">...under this you can use col classes and specify the width ...</div>
关于css - 内联表格不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45741434/