Как можно предотвратить перетасовку входных данных в неправильное место при отображении информационных блоков с помощью 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

Вам не хватает класса row, а также вам необходимо обновить 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 2

Вы должны поместить <div class="container-fluid"><div class="row" /></div></div> в качестве родителя для вашего ребенка <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

Answer 3

вам нужно обернуть 2 столбца col-md-6 в ряд следующим образом:

<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>