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

时间：2014-12-29 17:50:37

标签： css html5 css3 twitter-bootstrap media-queries

我正在使用bootstrap。我有一个内联表单，有两行图像。在移动设备上，每个图像都有自己的行。我希望它保持两行，无论大小。

这是桌面上的应用方式：

Desktop version

这里是移动设备：

enter image description here 这是我现在使用的媒体查询似乎不起作用：

@media (max-width: @screen-xs-max) { 
    .selfie_mobile_element{
        float: left;
    }
}

这里是html和其他添加的样式：

＆＃13;
＆＃13; 
.image_form_holder {
  padding: 25px 25px;
}
.image_input {
  display: none;
}
.color-form-groups {
  width: 20%;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

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

2 个答案:

答案 0 :(得分：3)

看起来每边25px的填充都会破坏行。在仅320px的移动房地产中，您的填充占据了200px。我会删除移动媒体查询中的填充。

答案 1 :(得分：0)

我从代码示例中删除了所有.form-group和.form-inline类，因为没有任何常规表单元素。在form内，我每隔四个.row列添加了两个.col-xs-3。我没有使用类.image_input来隐藏单选按钮，而是选择添加Bootstrap类.hidden来实现相同的目标。

我保留了整个表单周围的.col-md-6类，但我不确定您是否希望表单占据桌面md大小的屏幕左侧部分。我添加了一个.container，因为每个Bootstrap网格都应该有一个像.container或.container-fluid这样的容器（因为这是媒体查询操作的类）。

如果您不依赖于.image_label和.image_input等CSS课程，我认为您可以将其清理一下。

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <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 id="picture_form" method="post">
        <div id="color_list">
          <div class="row">
            <div class="col-xs-3">
              <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 hidden" id="picture_shape_yellow_mask" name="picture[shape]" type="radio" value="yellow_mask" />
              </div>
            </div>
            <div class="col-xs-3">
              <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 hidden" id="picture_shape_pink_mask" name="picture[shape]" type="radio" value="pink_mask" />
              </div>
            </div>
            <div class="col-xs-3">
              <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 hidden" id="picture_shape_red_mask" name="picture[shape]" type="radio" value="red_mask" />
              </div>
            </div>
            <div class="col-xs-3">
              <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 hidden" id="picture_shape_blue_mask" name="picture[shape]" type="radio" value="blue_mask" />
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-xs-3">
              <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 hidden" id="picture_shape_green_mask" name="picture[shape]" type="radio" value="green_mask" />
              </div>
            </div>
            <div class="col-xs-3">
              <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 hidden" id="picture_shape_purple_mask" name="picture[shape]" type="radio" value="purple_mask" />
              </div>
            </div>
            <div class="col-xs-3">
              <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 hidden" id="picture_shape_cyan_mask" name="picture[shape]" type="radio" value="cyan_mask" />
              </div>
            </div>
            <div class="col-xs-3">
              <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 hidden" 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" />

        <input class="img-responsive center-block" name="commit" src="/assets/submit_button.png" type="image" value="Comment" />
      </form>
    </div>
  </div>
</div>

P.S。我认为您的媒体查询无效，因为它使用了LESS变量@screen-xs-max，您确定要将LESS转换为CSS吗？

相关问题
最新问题