在使用 Bootstrap 显示信息框时，如何防止输入乱序到错误的位置？

Question

我正在尝试创建一个应显示警报的表单：

当点击输入控件旁边的按钮控件时，它应该会显示一个警告。警报显示正确，但是，随机播放后的输入控件移到错误的位置：

我希望看到以下情况发生：

如何防止输入控件从左侧移到右侧？请记住，在解决方案中，我希望在调整到较小的屏幕尺寸时输入控件的顺序相同。

这是我目前在代码中尝试的：

function toggleInfo(ele) {
  if (ele.style.display === "none") {
    ele.style.display = "block";
  } else {
    ele.style.display = "none";
  }
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="col-md-6">
  <div class="form-group">
    <label>One</label>
    <div class="input-group">
      <input type="text" class="form-control" />
      <div class="input-group-btn">
        <button type="button" class="btn btn-default" onclick="toggleInfo(foo_id)">
          -
        </button>
      </div>
    </div>
  </div>
  <div class="alert alert-info" style="display: none;" id="foo_id">
    <strong>Info: </strong> Message.
  </div>
</div>

<div class="col-md-6">
  <div class="form-group">
    <label>Two</label>
    <div class="input-group">
      <input type="text" class="form-control" />
      <div class="input-group-btn">
        <button type="button" class="btn btn-default">
          -
        </button>
      </div>
    </div>
  </div>
</div>

<div class="col-md-6">
  <div class="form-group">
    <label>Three</label>
    <div class="input-group">
      <input type="text" class="form-control" />
      <div class="input-group-btn">
        <button type="button" class="btn btn-default">
          -
        </button>
      </div>
    </div>
  </div>
</div>

<div class="col-md-6">
  <div class="form-group">
    <label>Four</label>
    <div class="input-group">
      <input type="text" class="form-control" />
      <div class="input-group-btn">
        <button type="button" class="btn btn-default">
          -
        </button>
      </div>
    </div>
  </div>
</div>

<div class="col-md-6">
  <div class="form-group">
    <label>Five</label>
    <div class="input-group">
      <input type="text" class="form-control" />
      <div class="input-group-btn">
        <button type="button" class="btn btn-default">
          -
        </button>
      </div>
    </div>
  </div>
</div>

我尝试将每两个 col-md-6 元素包裹在一个 <div> 元素中，看看它们是否会保持粘在一起。事实并非如此：

function toggleInfo(ele) {
  if (ele.style.display === "none") {
    ele.style.display = "block";
  } else {
    ele.style.display = "none";
  }
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<div><!-- Not working -->
  <div class="col-md-6">
    <div class="form-group">
      <label>One</label>
      <div class="input-group">
        <input type="text" class="form-control" />
        <div class="input-group-btn">
          <button type="button" class="btn btn-default" onclick="toggleInfo(foo_id)">
            -
          </button>
        </div>
      </div>
    </div>
    <div class="alert alert-info" style="display: none;" id="foo_id">
      <strong>Info: </strong> Message.
    </div>
  </div>

  <div class="col-md-6">
    <div class="form-group">
      <label>Two</label>
      <div class="input-group">
        <input type="text" class="form-control" />
        <div class="input-group-btn">
          <button type="button" class="btn btn-default">
            -
          </button>
        </div>
      </div>
    </div>
  </div>
</div><!-- End of change I tried -->

<div class="col-md-6">
  <div class="form-group">
    <label>Three</label>
    <div class="input-group">
      <input type="text" class="form-control" />
      <div class="input-group-btn">
        <button type="button" class="btn btn-default">
          -
        </button>
      </div>
    </div>
  </div>
</div>

<div class="col-md-6">
  <div class="form-group">
    <label>Four</label>
    <div class="input-group">
      <input type="text" class="form-control" />
      <div class="input-group-btn">
        <button type="button" class="btn btn-default">
          -
        </button>
      </div>
    </div>
  </div>
</div>

<div class="col-md-6">
  <div class="form-group">
    <label>Five</label>
    <div class="input-group">
      <input type="text" class="form-control" />
      <div class="input-group-btn">
        <button type="button" class="btn btn-default">
          -
        </button>
      </div>
    </div>
  </div>
</div>

我该怎么做才能解决这个问题？

Answer 1

你需要像这样连续包装 2 个 col-md-6 div：

<div class="row">
<div class="col-md-6">
    <div class="form-group">
        <label>One</label>
        <div class="input-group">
        <input type="text" class="form-control" />
        <div class="input-group-btn">
            <button type="button" class="btn btn-default" onclick="toggleInfo(foo_id)">
            -
            </button>
        </div>
        </div>
    </div>
    <div class="alert alert-info" style="display: none;" id="foo_id">
        <strong>Info: </strong> Message.
    </div>
</div>
<div class="col-md-6">
    <div class="form-group">
        <label>Two</label>
        <div class="input-group">
        <input type="text" class="form-control" />
        <div class="input-group-btn">
            <button type="button" class="btn btn-default">
            -
            </button>
        </div>
        </div>
    </div>
</div>

Answer 2

您缺少 row class 并且您还需要更新 DOM 检查代码段。

function toggleInfo(ele) {
  if (ele.style.display === "none") {
    ele.style.display = "block";
  } else {
    ele.style.display = "none";
  }
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<div class="row">
  <!-- Not working -->
  <div class="col-md-6">
    <div class="form-group">
      <label>One</label>
      <div class="input-group">
        <input type="text" class="form-control" />
        <div class="input-group-btn">
          <button type="button" class="btn btn-default" onclick="toggleInfo(foo_id)">
            -
          </button>
        </div>
      </div>
    </div>
    <div class="alert alert-info" style="display: none;" id="foo_id">
      <strong>Info: </strong> Message.
    </div>
  </div>

  <div class="col-md-6">
    <div class="form-group">
      <label>Two</label>
      <div class="input-group">
        <input type="text" class="form-control" />
        <div class="input-group-btn">
          <button type="button" class="btn btn-default">
            -
          </button>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- End of change I tried -->
<div class="row">
<div class="col-md-6">
  <div class="form-group">
    <label>Three</label>
    <div class="input-group">
      <input type="text" class="form-control" />
      <div class="input-group-btn">
        <button type="button" class="btn btn-default">
          -
        </button>
      </div>
    </div>
  </div>
</div>

<div class="col-md-6">
  <div class="form-group">
    <label>Four</label>
    <div class="input-group">
      <input type="text" class="form-control" />
      <div class="input-group-btn">
        <button type="button" class="btn btn-default">
          -
        </button>
      </div>
    </div>
  </div>
</div>
</div>
<div class="row">
<div class="col-md-6">
  <div class="form-group">
    <label>Five</label>
    <div class="input-group">
      <input type="text" class="form-control" />
      <div class="input-group-btn">
        <button type="button" class="btn btn-default">
          -
        </button>
      </div>
    </div>
  </div>
</div>
</div>

Answer 3

您应该将 <div class="container-fluid"><div class="row" /></div></div> 作为 parent 放置到您的 child <div class="col-md-6" />

重要的部分是<div class="row"> /*child col */</div>

请参阅下面的示例片段：

<div class="container-fluid">
    <div class="row">
      <div class="col-md-6">
        <div class="form-group">
          <label>One</label>
          <div class="input-group">
            <input type="text" class="form-control" />
            <div class="input-group-btn">
              <button type="button" class="btn btn-default" onclick="toggleInfo(foo_id)">
              -
            </button>
            </div>
          </div>
        </div>
        <div class="alert alert-info" style="display: none;" id="foo_id">
          <strong>Info: </strong> Message.
        </div>
      </div>

  <div class="col-md-6">
    <div class="form-group">
      <label>Two</label>
      <div class="input-group">
        <input type="text" class="form-control" />
        <div class="input-group-btn">
          <button type="button" class="btn btn-default">
          -
        </button>
        </div>
      </div>
    </div>
  </div>
</div>

在此处调整：https://codepen.io/kenneth-bolico/pen/oNvmdRo

在使用 Bootstrap 显示信息框时，如何防止输入乱序到错误的位置？

How could I prevent inputs from shuffling to a wrong location when showing info boxes using Bootstrap?

html

css

twitter-bootstrap-3