這也許使用media queries
會給你你想要的東西 - 或者,至少,將指向一些可能的方向:
請參閱fiddle here。
CSS
.center-block {float: none !important}
.inline{
display:inline-block!important;
width:auto!important;
}
@media only screen and (min-width : 320px) {
input[type="text"] {
width: 110px;
background-color: yellow;
}
}
/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {
input[type="text"] {
width:110px;
background-color: red;
}
}
/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
input[type="text"] {
width: 110px;
background-color: blue;
}
}
/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
input[type="text"] {
width: 110px;
background-color: grey;
}
}
/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
input[type="text"] {
width: 120px;
background-color: green;
}
}
HTML
<div class = "container col-xs-12 col-sm-8 col-lg-6 center-block">
<form class="form-inline inline">
<div class="form-group pull-left">
<label>Start:</label>
<input type="text" class="form-control" placeholder="{{ start_length }}" id="bar">
</div>
<div class="form-group pull-right">
<label>End: </label>
<input type="text" class="form-control" placeholder="{{ end_length }}" id="bar1">
</div>
</form>
</div>
你能創建一個這樣的問題的小提琴嗎? – Mivaweb
這就是Bootstrap應該如何工作。 –
我會做小提琴。 @BidhanA我同意,但正如我所說,第一種形式組一旦擴大了形式,一旦你縮放,但不是第二個。再加上表格應該有足夠的空間讓他們兩個都適合一條線。 – nadermx