html - 使用 Bootstrap 内联表单，我希望表单元素在移动设备上保持样式

Question

我正在使用 Bootstrap 。我有一个包含两行图像的内嵌表单。在移动设备上，每个图像都有自己的行。无论大小如何，我都希望它保留两行。

这是它在桌面上应有的样子:

这是在移动设备上:

这是我现在使用的媒体查询，但似乎不起作用:

@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>

如何在移动设备上保留这两行？

Answer 1

看起来每边 25px 的填充会打断行。在只有 320 像素的移动空间中，您的内边距占据了其中的 200 像素。我会删除移动媒体查询上的填充。