Question

[1] Bootstrap 3，输入组在移动设备中无法正常显示。请看下面的代码。它看起来完全在我的Macbook上，但在我的iPhone上，输入框没有完全显示，搜索框出现在下一行。

<div class="row">
  <div class="col-xs-12 col-sm-12 col-md-1 ">
  </div>
  <div class="col-xs-12 col-sm-12 col-md-10 ">
    <div>
      <!--<form class="form-inline" role="form"  method="post" action="/reviews">-->
      <form method="POST" action="http://exelrate.dev/reviews" accept-charset="UTF-8" class="form-inline">
        <div class="form-group">
          <input type="hidden" name="_token" value="t1eHqUE5XYCkmSIYigI0q7RcXwPe265d7x1HyFRc">
          <div class="input-group">
            <div class="input-group-addon" style="min-width:110px;">Location</div>
            <input type="text" class="form-control "  id="mapsearch" name="mapsearch" placeholder="Enter City,Pin or Address" 
              style="height:43px; min-width:402px; font-size:1.0em;" required/>
            <div class="input-group-addon">
              <select id="carmodel" class="form-control input-sm" style="min-width:200px;" required="required" name="size">
                <option value="Car" selected="selected">Car</option>
                <option value="2-Wheeler">2-Wheeler</option>
              </select>
            </div>
            <input type="hidden" class="form-control input-sm" name="input_lat" id="input_lat" required>
            <input type="hidden" class="form-control input-sm" name="input_lng" id="input_lng" required>
          </div>
          <button type="submit" class="btn btn-danger" id="btn_search" style="width:200px;height:42px;">Search</button>
        </div>
      </form>
    </div>
  </div>
</div>

[1]：http://i.stack.imgur.com/YZ8m4.png [移动网站]

Answer 1

您的内联样式会影响Bootstrap。此外，您犯了一些常见的Bootstrap错误：

在input-group内放置form-group（这不是一个大问题，但在某些浏览器版本中我遇到了对齐问题 - 尽可能避免）。
在一个input-group中放置了多个输入。不要这样做，即使只有一个是type="text"，其余的都是隐藏的。
你不需要一个空列用于offseting。使用Bootstrap的offseting类（在你的情况下为col-md-offset-1）。

这是您表单的固定版本：

注意：您不需要CSS（form {margin: 15px;}）规则，我只是将其添加到堆栈溢出代码段。

＆＃13;

form {
  margin: 15px;
}
@media (min-width: 768px) {
  form .hidden-xs {
    display: table-cell !important;
  }
}

＆＃13;

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="row">
  <div class="col-xs-12 col-sm-12 col-md-10 col-md-offset-1">
    <div>
      <!--<form class="form-inline" role="form"  method="post" action="/reviews">-->
      <form method="POST" action="http://exelrate.dev/reviews" accept-charset="UTF-8" class="form-inline">

        <input type="hidden" name="_token" value="t1eHqUE5XYCkmSIYigI0q7RcXwPe265d7x1HyFRc">
        <div class="input-group">
          <div class="input-group-addon hidden-xs">Location</div>
          <input type="text" class="form-control" id="mapsearch" name="mapsearch" placeholder="Enter City,Pin or Address" style="min-height:44px;" required/>
          <div class="input-group-addon">
            <select id="carmodel" class="selectpicker form-control input-sm" required="required" name="size" style="min-width: 120px">
              <option value="Car" selected="selected">Car</option>
              <option value="2-Wheeler">2-Wheeler</option>
            </select>
          </div>
        </div>
        <input type="hidden" class="form-control input-sm" name="input_lat" id="input_lat" required>
        <input type="hidden" class="form-control input-sm" name="input_lng" id="input_lng" required>
        <button type="submit" class="btn btn-danger" id="btn_search" style="min-width:200px;height:42px; margin-top: 15px;">Search</button>
      </form>
    </div>
  </div>
</div>

＆＃13;

Bootstrap 3，输入组无响应。请指导

1 个答案: