Флажок горизонтальной формы Bootstrap 4 не выравнивается

Я пытаюсь интегрировать Bootstrap 4 в приложение Angular 5. Строки с флажками и переключателями в моей горизонтальной форме не совпадают с другими строками. Я использовал код из документации Bootstrap. Эта форма имеет липкую панель навигации и нижний колонтитул. Что в моем css вызывает эту проблему?

http://plnkr.co/edit/xH6VJo?p=preview

Стиль:

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    /* Set the fixed height of the footer here */
    height: 60px;
    line-height: 60px; /* Vertically center the text there */
    background-color: #f5f5f5;
  }
  .footer-text {
    margin-right: 2rem;
  }
body {
    min-height: 75rem;
    padding-top: 5rem;
  }
.router-outlet {
    margin: 2rem;
}

html внутри роутера-выхода:

<form>
    <div class="form-group row">
      <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
      <div class="col-sm-10">
        <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
      </div>
    </div>
    <div class="form-group row">
      <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
      <div class="col-sm-10">
        <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
      </div>
    </div>
    <fieldset class="form-group">
      <div class="row">
        <legend class="col-form-label col-sm-2 pt-0">Radios</legend>
        <div class="col-sm-10">
          <div class="form-check">
            <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
            <label class="form-check-label" for="gridRadios1">
              First radio
            </label>
          </div>
          <div class="form-check">
            <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
            <label class="form-check-label" for="gridRadios2">
              Second radio
            </label>
          </div>
          <div class="form-check disabled">
            <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
            <label class="form-check-label" for="gridRadios3">
              Third disabled radio
            </label>
          </div>
        </div>
      </div>
    </fieldset>
    <div class="form-group row">
      <div class="col-sm-2">Checkbox</div>
      <div class="col-sm-10">
        <div class="form-check">
          <input class="form-check-input" type="checkbox" id="gridCheck1">
          <label class="form-check-label" for="gridCheck1">
            Example checkbox
          </label>
        </div>
      </div>
    </div>
    <div class="form-group row">
      <div class="col-sm-10">
        <button type="submit" class="btn btn-primary">Sign in</button>
      </div>
    </div>
  </form>

css angularjs twitter-bootstrap bootstrap-4 ng-bootstrap
person S. Beliadsi    schedule 23.01.2018    source источник
comment
Не уверен, почему это происходит, но, повозившись с вашим plnkr, я заставил его работать, удалив form-check-input   -  person Xavier    schedule 24.01.2018
comment
Вывод HTML, который вы разместили здесь, действительно выравнивается с использованием этого кода.   -  person WebDevBooster    schedule 24.01.2018
comment
Похоже на несоответствие в 4.x Beta и Alpha. Ваш код выводится, как и ожидалось (правильно выровнен) в общем выпуске 4.0.0.   -  person Robert    schedule 24.01.2018
comment
@Roberr C Спасибо. Обновление ссылки на общий выпуск устранило проблему.   -  person S. Beliadsi    schedule 24.01.2018
comment
@RobertC Не могли бы вы преобразовать свой комментарий в ответ? Спасибо.   -  person S. Beliadsi    schedule 25.01.2018
comment
@S.Beliadsi S.Beliadsi - поскольку проблема связана с ошибкой между бета-версией / общим выпуском, я бы, вероятно, рекомендовал просто закрыть / удалить ветку. На самом деле здесь нет решения, которое помогло бы другим, поскольку новички, скорее всего, будут использовать общедоступную версию.   -  person Robert    schedule 25.01.2018

Ответы (1)


arrow_upward
4
arrow_downward

Если вы пытаетесь выровнять кнопки по меткам по вертикали, установите для родительского типа display значение flex, а для свойства align-items установите значение center и удалите верхнее поле переключателя.

.form-check {
    display: flex;
    align-items: center;
}
.form-check-input {
    margin-top: 0px;
}

Если вы пытаетесь исправить липкий нижний колонтитул, установите position на fixed, а не на absolute.

.footer[_ngcontent-c1] {
    position: fixed;
}
person doppler    schedule 23.01.2018