Question

我想设计bootstrap表单菜单，但如果我在平板电脑上使用了视图，则菜单没有响应。请查看下面的附件：

我的代码：

<fieldset>
  <div class="form-group">
    <div class="col-sm-offset-0 col-sm-12">
      <div class="form-group input-group">
        <!-- nested form-group acting like row -->
        <div class="col-sm-2 ">
          <div class="input-group">
            <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
            <input type="date" class="form-control" />
          </div>
        </div>
        <!-- /col-sm-6 -->

        <div class="col-sm-5">
          <div class="input-group">
            <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
            <input type="date" class="form-control" />
          </div>
        </div>
        <!-- /col-sm-6 -->

        <div class="col-sm-2">
          <div class="input-group">
            <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
            <input type="date" class="form-control" />
          </div>
        </div>
        <!-- /col-sm-4 -->

        <div class="col-sm-2">
          <div class="input-group">
            <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
            <input type="date" class="form-control" />
          </div>
        </div>
        <!-- /col-sm-2 -->

        <div class="col-sm-1">
          <button type="submit" class="btn btn-danger btn-block">Add</button>
        </div>
      </div>
      <!-- /nested form-group acting like row -->
    </div>
    <!-- /col-sm-offset-3 col-sm-9 -->
  </div>
  <!-- /form-group -->
</fieldset>

而且，这是jsfiddle

的链接

Answer 1

使用Bootstrap网格系统

将您的输入元素放在Bootstrap Grid

中

如果你想了解bootstrap网格链接在这里 https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp

Answer 2

您正在使用

<div class="form-group">
  <div class="col-sm-offset-0 col-sm-12">
    <div class="form-group input-group">
     <div class="col-sm-2 ">

在最后一行，您在平板电脑上定义Bootstrap单元 - 视图

尝试使用

<div class="col-md-2 col-sm-12">

现在它将使用带有默认引导程序填充的完整父级大小

Answer 3

您可以为每个网格添加col-xs-12。

检查JSFiddle中的答案：http://jsfiddle.net/1vjLcjow/1/

Answer 4

只是一个例子 试试这个

第一次使用Bootstrap CDN bootstrap@4.0.0-beta（最新版本）

<强>表单表单控件样式，布局选项和自定义组件的示例和使用指南，用于创建各种表单。

你可以学习它 https://getbootstrap.com/docs/4.0/components/forms/#form-controls

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>


<form>
  <div class="form-group">
    <label for="exampleFormControlInput1">Email address</label>
    <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect1">Example select</label>
    <select class="form-control" id="exampleFormControlSelect1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect2">Example multiple select</label>
    <select multiple class="form-control" id="exampleFormControlSelect2">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlTextarea1">Example textarea</label>
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
  </div>
</form>

Bootstrap平板电脑视图

4 个答案: