Question

我正在尝试将Bootstrap 4集成到Angular 5应用程序中。我的水平表单上带复选框和单选按钮的行未与其他行对齐。我使用了Bootstrap文档中的代码。此表单具有粘性导航栏和页脚。我的CSS中有什么导致这个问题？

风格：

.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;
}

在router-outlet中的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>

Answer 1

如果您尝试将按钮与标签垂直对齐，请将父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;
}

Bootstrap 4水平表单复选框未对齐

1 个答案: