Ввод Bootstrap 4 не останавливается при заполнении

Question

Я делаю простую форму с этим кодом:

<div class="container">
    <div class="jumbotron" style="width:100%">
        <h1>
            ConfigTool Web Interface
        </h1>
        <p>
            Edit the config variables here and click save.
        </p>
    </div>

    <div class="form-group row">
        <label class="col-2">Name:</label>
        <input class="form-control col-10" type="text" />
    </div>
</div>

Это выглядит так:

Выможно увидеть, что вход не совпадает с jumbotron, и это потому, что вход не останавливается в дополнение:

Как яисправить это?

Answer 1

Вам не хватает родительского элемента для группы форм.Попробуйте это -

 <div class="form-horizontal" >
  <div class="form-group">
    <label class="control-label col-sm-2" for="email">Email:</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="email" placeholder="Enter email">
    </div>
  </div>
</div>

Answer 2

Вы добавили предопределенные классы сетки Bootstrap во входной элемент.Итак, заполнение классов Grid применяется в элементе input.Вам нужно будет создать классы сетки с отдельным элементом div.затем поместите элемент ввода внутрь этого элемента div.

<div class="container">
    <div class="jumbotron" style="width:100%">
        <h1>
            ConfigTool Web Interface
        </h1>
        <p>
            Edit the config variables here and click save.
        </p>
    </div>
    <div class="form-group row">
        <label class="col-2">Name:</label>
        <div class="col-10">
        <input class="form-control" type="text" />
        </div>
    </div>
</div>

также, пожалуйста, проверьте этот официальный загрузчик Горизонтальная форма

Answer 3

Здесь вы идете с решением

<div class="container">
    <div class="jumbotron" style="width:100%">
        <h1>
            ConfigTool Web Interface
        </h1>
        <p>
            Edit the config variables here and click save.
        </p>
    </div>

    <div class="form-group row">
      <div class="col-2">
        <label>Name:</label>
      </div>
      <div class="col-10">
        <input class="form-control" type="text" />
      </div>
    </div>
</div>

Вы должны использовать col-* внутри тега div

Answer 4

Классы столбцов должны быть переданы элементам, окружающим элементы управления вводом (и метки).Система сетки Bootstrap работает лучше всего следующим образом:
div.container> div.row> div.col-*> content

<div class="container">
    <div class="jumbotron" style="width:100%">
        <h1>
            ConfigTool Web Interface
        </h1>
        <p>
            Edit the config variables here and click save.
        </p>
    </div>
    <div class="form-group row">
        <div class="col-2">
            <label>Name:</label>

        </div>
        <div class="col-10">
            <input class="form-control" type="text" />
        </div>
    </div>
</div>

Answer 5

Вам необходимо удалить класс "row" из группы форм.класс строки в основном удаляет отступ от элемента div.

<div class="form-group">
    <label class="col-2">Name:</label>
    <input class="form-control col-10" type="text" />
</div>