当两个输入字段在大屏幕上宽度较短时,如何将它们彼此靠近放置。问题是我希望输入字段位于宽度较短的一行中。我最终实现了这一点,但随后在较短的屏幕上它堆叠起来,即使它有足够的空间排成一行。这是 demo .
我想要的是:只要宽度适合视口(viewport),就将输入字段保持在一行中,否则,将它们以全宽堆叠起来。
注意:我刚刚开始学习 bootstrap,并不精通所有类(class)。
HTML
<div class="site-wrapper">
<div class="jumbotron">
<h1>Header</h1>
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="input-group-lg">
<input id="user" class="form-control form-inline" placeholder="Your name" type="text">
</div>
</div>
<div class="col-md-6">
<div class="input-group-lg">
<select id="boardSize" class="form-control form-inline" title="Select Size">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
body {
background-color: #fff;
color: #ffffff;
text-align: center;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
margin: 0;
}
html, body {
height: 100%;
background-color: #333;
}
.site-wrapper {
width: 100%;
height: 100%;
min-height: 100%;
-webkit-box-shadow: inset 0 0 100px rgba(0,0,0,.5);
box-shadow: inset 0 0 100px rgba(0,0,0,.5);
}
.jumbotron {
background-color: #ccbb99 !important;
/*background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.9));*/
height: 100%;
margin-bottom: 0;
}
.jumbotron h1 {
font-family: chalkitup, "sans-serif";
color: #69350F !important;
}
#user, #boardSize {
max-width: 280px;
}
最佳答案
要防止堆叠,您应该使用 col-xs-*
。
如果您将 pull-right
和 pull-left
结合使用,那么您可以选择要在网格中放置输入的位置。注意 form-inline
类的使用
<form class="form-inline">
<div class="col-xs-6">
<div class="form-group pull-right">
<div class="input-group-lg ">
<input id="user" type="text" class="form-control form-inline" placeholder="Your name">
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group pull-left">
<div class="input-group-lg ">
<select id="boardSize" class="form-control form-inline" title="Select Size">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
</div>
</div>
</form>
DEMO
关于html - 在 Bootstrap 中自定义输入字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41974948/