【发布时间】：2015-02-25 22:06:58
【问题描述】：
我正在使用引导程序。我有一个包含两行图像的内联表单。在移动设备上，每个图像都有自己的行。无论大小如何，我都希望它保留两行。
它在桌面上应该是这样的：
这是在移动设备上：
这是我现在使用的似乎不起作用的媒体查询：
@media (max-width: @screen-xs-max) {
.selfie_mobile_element{
float: left;
}
}
这里是 html 和其他添加的样式：
.image_form_holder {
padding: 25px 25px;
}
.image_input {
display: none;
}
.color-form-groups {
width: 20%;
}<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-md-6 wow fadeInLeft image_form_holder" data-wow-delay="0.5s">
<img alt="Pick color" src="/assets/pick_color.svg" />
<form class="form-inline" id="picture_form" method="post">
<div id="color_list">
<div class="form-group color-form-groups selfie_mobile_element">
<div id="yellow">
<label for="picture_shape_yellow_mask">
<img alt="Yellowshape" class="img-responsive image_label" src="http://s2.postimg.org/54hv2icgp/yellowshape.png" />
</label>
<input class="image_input" id="picture_shape_yellow_mask" name="picture[shape]" type="radio" value="yellow_mask" />
</div>
</div>
<div class="form-group color-form-groups selfie_mobile_element">
<div id="pink">
<label for="picture_shape_pink_mask">
<img alt="Pinkshape" class="img-responsive image_label" src="http://s15.postimg.org/9bvctbmob/pinkshape.png" />
</label>
<input class="image_input" id="picture_shape_pink_mask" name="picture[shape]" type="radio" value="pink_mask" />
</div>
</div>
<div class="form-group color-form-groups selfie_mobile_element">
<div id="red">
<label for="picture_shape_red_mask">
<img alt="Redshape" class="img-responsive image_label" src="http://s14.postimg.org/rdoetat1d/redshape.png" />
</label>
<input class="image_input" id="picture_shape_red_mask" name="picture[shape]" type="radio" value="red_mask" />
</div>
</div>
<div class="form-group color-form-groups ">
<div id="blue">
<label for="picture_shape_blue_mask">
<img alt="Blueshape" class="img-responsive image_label" src="http://s8.postimg.org/8eye37oid/blueshape.png" />
</label>
<input class="image_input" id="picture_shape_blue_mask" name="picture[shape]" type="radio" value="blue_mask" />
</div>
</div>
<div class="form-group color-form-groups">
<div id="green">
<label for="picture_shape_green_mask">
<img alt="Greenshape" class="img-responsive image_label" src="http://s17.postimg.org/7b70mi40v/greenshape.png" />
</label>
<input class="image_input" id="picture_shape_green_mask" name="picture[shape]" type="radio" value="green_mask" />
</div>
</div>
<div class="form-group color-form-groups">
<div id="purple">
<label for="picture_shape_purple_mask">
<img alt="Purpleshape" class="img-responsive image_label" src="http://s1.postimg.org/lbwejz8vj/purpleshape.png" />
</label>
<input class="image_input" id="picture_shape_purple_mask" name="picture[shape]" type="radio" value="purple_mask" />
</div>
</div>
<div class="form-group color-form-groups">
<div id="cyan">
<label for="picture_shape_cyan_mask">
<img alt="Cyanshape" class="img-responsive image_label" src="http://s17.postimg.org/90bigtucf/cyanshape.png" />
</label>
<input class="image_input" id="picture_shape_cyan_mask" name="picture[shape]" type="radio" value="cyan_mask" />
</div>
</div>
<div class="form-group color-form-groups">
<div id="orange">
<label for="picture_shape_orange_mask">
<img alt="Orangeshape" class="img-responsive image_label" src="http://s2.postimg.org/48c6vko0p/orangeshape.png" />
</label>
<input class="image_input" id="picture_shape_orange_mask" name="picture[shape]" type="radio" value="orange_mask" />
</div>
</div>
</div>
<div>
<label for="file_pic" class="btn btn-default btn-large btn-file center-block">Upload a Selfie</label>
<input id="file_pic" name="picture[pic]" type="file" />
</div>
<input class="img-responsive center-block" name="commit" src="/assets/submit_button.png" type="image" value="Comment" />
</form>
</div>
</div>如何在移动设备上保留这两行？
【问题讨论】：
-
你可以嵌套 Bootstrap 的网格，为什么不简单地添加两个
.row和四个.col-xs-3列？ -
我试过了。由于某种原因，它不起作用。它只是保持不变。
标签： html css twitter-bootstrap media-queries