Question

我使用Bootstrap 4在HTML + CSS中设置表单样式。我有六个带标签的复选框，在某些介质尺寸上应该显示为两行三列。应该对齐每列上的复选框。此外，右列任何行上的最长文本应与表单的其余部分右对齐。到目前为止，我只能管理其中一件事。那么，我该怎么做呢：

或者这个：

到此（图像编辑）：

以下是我在第一个示例中使用的HTML代码，复选框已对齐（它已嵌入其他div中，但在此问题中不应有任何作用）。
仅供参考，我在以下自定义样式中添加了一些样式（包含在survey01.css中）：

＆＃13;

.form-inline>div>label {
  white-space: nowrap;
}

@media (max-width: 767px) {
  #nature-label {
    margin-bottom: 0;
  }
}

@media (max-width: 1199px) {
  #nature-label {
    margin-bottom: 0;
  }
}

＆＃13;

<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- IE displays content in highest supported mode -->
  <title>Do you know what proteins are?</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- width as in viewport; zoom=100% -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" media="screen" href="survey01.css" />
  <!-- optimize for screens -->
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-sm-12">
        <h1 id="title" class="display-4 text-center">Test title</h1>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-12">
        <p id="description" class="text-center">Test subtitle.</p>
      </div>
    </div>
    <div class="jumbotron">
      <form id="survey-form">
        <div class="form-group row m-0">
          <div class="container-fluid p-0">
            <div class="form-row">
              <div class="form-group form-group-md col-md-5 col-lg-6 mb-2">
                <!-- @media modifies mb-2 -->
                <div class="row m-0">
                  <label for="nature" id="nature-label" class="pr-2 pl-0">Do you think proteins are a natural or synthetic product?</label>
                </div>
              </div>
              <div class="form-inline justify-content-between align-items-start col-md-7 col-lg-6 mb-3">
                <div class="d-flex justify-content-around align-items-start col-12 col-sm-auto pr-0">
                  <label for="nature1">
                                            <input type="radio" id="nature1" name="nature" value="natural" class="mr-1">Natural
                                        </label>
                </div>
                <div class="d-flex justify-content-around align-items-start col-12 col-sm-auto pr-0">
                  <label for="nature2">
                                            <input type="radio" id="nature2" name="nature" value="synthetic" class="mr-1">Synthetic
                                        </label>
                </div>
                <div class="d-flex justify-content-around align-items-start col-12 col-sm-auto pr-0">
                  <label for="nature3">
                                            <input type="radio" id="nature3" name="nature" value="both" class="mr-1">Both
                                        </label>
                </div>
                <div class="d-flex justify-content-around align-items-start col-12 col-sm-auto pr-0">
                  <label for="nature4">
                                            <input type="radio" id="nature4" name="nature" value="dontknow" class="mr-1">Don't know
                                        </label>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="form-group row m-0">
          <div class="container-fluid p-0">
            <div class="form-row">
              <div class="form-group form-group-md col-md-4 col-lg-6 col-xl-4 mb-2">
                <!-- @media modifies mb-2 -->
                <div class="row m-0">
                  <label for="identify" id="identify-label" class="pr-2 pl-0">Which of the following qualify as 'proteins'?</label>
                </div>
              </div>
              <div class="form-inline justify-content-between align-items-start col-md-8 col-lg-6 col-xl-8 mb-3">
                <div class="d-flex justify-content-center justify-content-sm-start align-items-start col-12 col-sm-4 col-xl-auto pr-0">
                  <label for="identify1">
                                            <input type="checkbox" id="identify1" name="identify" value="meat" class="mr-1">Meat
                                        </label>
                </div>
                <div class="d-flex justify-content-center justify-content-sm-start align-items-start col-12 col-sm-4 col-xl-auto pr-0">
                  <label for="identify2">
                                            <input type="checkbox" id="identify2" name="identify" value="arginine" class="mr-1">Arginine
                                        </label>
                </div>
                <div class="d-flex justify-content-center justify-content-sm-start align-items-start col-12 col-sm-4 col-xl-auto pr-0">
                  <label for="identify3">
                                            <input type="checkbox" id="identify3" name="identify" value="haemoglobin" class="mr-1">H&#230;moglobin
                                        </label>
                </div>
                <div class="d-flex justify-content-center justify-content-sm-start align-items-start col-12 col-sm-4 col-xl-auto pr-0">
                  <label for="identify4">
                                            <input type="checkbox" id="identify4" name="identify" value="bar" class="mr-1">Protein bar
                                        </label>
                </div>
                <div class="d-flex justify-content-center justify-content-sm-start align-items-start col-12 col-sm-4 col-xl-auto pr-0">
                  <label for="identify5">
                                            <input type="checkbox" id="identify5" name="identify" value="egg" class="mr-1">Egg
                                        </label>
                </div>
                <div class="d-flex justify-content-center justify-content-sm-start align-items-end col-12 col-sm-4 col-xl-auto pr-0">
                  <label for="identify6">
                                            <input type="checkbox" id="identify6" name="identify" value="albumin" class="mr-1">Albumin
                                        </label>
                </div>
              </div>
            </div>
          </div>
        </div>
      </form>
    </div>
  </div>
</body>

＆＃13;

将div与右边距对齐，同时保持复选框垂直对齐

0 个答案: