Question

我在页面上有几个表单。我将控件分组，因此有两列。我的期望是，当我将浏览器折叠为模拟较小的屏幕时，列会折叠成一列，但所有发生的情况是控件的宽度会缩小而永远不会崩溃。

<div class="container">

  <form name="onlineevent" method="post">
    <div class="row">
      <div class="col-xs-6 col-sm-6 col-m-6 col-lg-6">
        <p>
          <input style="height: 54px;" type="text" name="onlineeventname" placeholder="Online Event Name">
        </p>
      </div>
      <div class="col-xs-6 col-sm-6 col-m-6 col-lg-6">
        <p>
          <input style="height: 54px;" type="text" name="onlineeventdetails" placeholder="Online Event Details">
        </p>
      </div>
  </form>
  </div>

Answer 1

他们不缩小为单列的原因是你指定它在所有屏幕中占据12个中的6个。也就是说，它占用了所有屏幕尺寸的一半空间。

要修复它，请替换

col-xs-6 col-sm-6 col-m-6 col-lg-6

col-xs-12 col-sm-12 col-md-6 col-lg-6这里需要12个中的12个小屏幕和超小屏幕。

请注意，您还写了m而不是md。

Answer 2

你在写：

<div class="col-xs-6 col-sm-6 col-m-6 col-lg-6">

但是应该写：

<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"> // note the "md"

无论如何，你可以写：

<div class="col-xs-6">

因为您的所有列都具有相同的宽度。

Bootstrap网格，显然我做错了

2 个答案: