如何在移动视图中使用元标记视口将所有 bootstrap 列保持在同一行中？

Question

我正在开发一个待办事项列表 Web 应用程序，我在两列的同一行中有一个输入字段和一个提交按钮。我添加了元标记视口以使其移动友好，但它会连续呈现它们中的每一个。我想在移动视图中将输入字段和提交按钮放在同一行，我需要做什么？

我尝试使用内联表单换行class，但在移动视图中仍然分成两行

这是元标记：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

这是我的输入和提交按钮标签：

<div class="row" id="myForm">
    <div class=" col-sm-11">
            <input class="form-control" id ="toDoListInput" placeholder="What needs to be done?" formControlName="toDoListInput" type="text">
    </div>
    <div class="col-sm-1" >
            <input class="btn btn-light" type="submit" name="Add" onclick="appendToList()">
    </div>
</div>

Answer 1

您现在编写代码的方式，每个列都会自动折叠成 col-xs-12 的等价物，因为您为其他任何内容指定的最高媒体断点是 col-sm-*。

您曾提到 col-xs-* 断点不适合所有可能的移动设备尺寸，从而导致水平滚动。避免潜在问题的一种方法是重新考虑如何显示 <input> 和按钮元素。 Bootstrap 有一个很棒的 UI 组件：.input-group

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="container-fluid">
  <div class="row" id="myForm">
    <div class="col-xs-12">
     <div class="input-group">
        <input class="form-control" id="toDoListInput" placeholder="What needs to be done?" formControlName="toDoListInput" type="text">
        <div class="input-group-btn">
          <button class="btn btn-light" role="button" type="submit" onclick="appendToList()">Add</button>
        </div>
      </div>
    </div>
  </div>
</div>

.input-group 与 .input-group-btn 的组合使您的表单输入和按钮对齐在一起，并且 .form-control class 将根据需要缩小（或放大）取决于视口的宽度。

如何在移动视图中使用元标记视口将所有 bootstrap 列保持在同一行中？

How to keep all bootstrap columns in the same row with meta tag viewport in mobile view?

html

viewport

twitter-bootstrap