Question

我正在使用仅具有CSS的Bootstrap 4在Vue.js项目中工作，并且我正在尝试使样式响应内容并且内联。

我想实现4列。在那2列带有标签，2列带有内容。我要对齐到内容左上角的所有标签。

  <div class="row">
    <div class="col">
      <form>
        <div class="row">
          <div class="col">
            <div class="label-column">
              <label>Label 1</label>

              <label>Label 2</label>

              <label>Label 3</label>
            </div>
          </div>
          <div class="col">
            <div class="content-column">
              <div>
                <p>{{contentForLabel1}}</p>
              </div>
              <br>

              <div>
                <p>{{contentForLabel2}}</p>
              </div>
              <br>

              <div>
                <p>{{contentForLabel3}}</p>
              </div>
            </div>
          </div>

          <div class="col">
            <label>Label 4</label>
          </div>

          <div class="col">
            <div class="content-area">
              <div>
                <div>
                  <p
                    style="font-weight: bold; color: grey"
                  >Content displayed here in text with inline styling</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </form>

这是我的CSS：

form {
  background-color: white;
  margin-top: 30px;
  margin-bottom: 30px;
  justify-content: center;
  align-content: center;
  padding-bottom: 25px;
  width: 100%;
}
.form-area {
  margin-top: 30px;
}
label {
  display: block;
  color: black;
  font-weight: bold;
}
.label-column {
  padding-top: 25px;
  display: flex;
  display: inline-block;
  width: 80%;
}
.content-column {
  padding-top: 25px;
  display: flex;
  display: inline-block;
  width: 80%;
}
.content-area {
  padding-bottom: 25px;
}

我希望我的结果是这样的（预期输出）：

LABEL 1              content text             LABEL 4          more text
                     with some more text                       and so on...
                                                               more text
LABEL 2              here starts the next                      and so on...
                     content text                              more text 
                                                               and so on...
LABEL 3              here starts the last
                     line of content text.

目前，我的结果如下所示（我要解决的问题）：

                                               LABEL 4            more text
LABEL 1             content text                                  and so on...
                    with some more text
LABEL 2

LABEL 3             here starts the next 
                    content text



                    here starts the last 
                    line of content text

有什么好的方法可以解决这个问题吗？

Answer 1

您可以通过正确使用Bootstrap网格来做到这一点。以下是您预期结果的解决方案。注意：我没有碰过您的任何CSS

form {
  background-color: white;
  margin-top: 30px;
  margin-bottom: 30px;
  justify-content: center;
  align-content: center;
  padding-bottom: 25px;
  width: 100%;
}

.form-area {
  margin-top: 30px;
}

label {
  display: block;
  color: black;
  font-weight: bold;
}

.label-column {
  padding-top: 25px;
  display: flex;
  display: inline-block;
  width: 80%;
}

.content-column {
  padding-top: 25px;
  display: flex;
  display: inline-block;
  width: 80%;
}

.synonym-area {
  padding-bottom: 25px;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

</head>

<body>
  <div class="container-fluid">
    <form>
      <div class="row">
        <div class="col-sm-6">
          <div class="row">
            <div class="col">
              <div class="label-column">
                <label>Label 1</label>
              </div>
            </div>
            <div class="col">
              <div class="content-column">
                <div>
                  <p>{{contentForLabel1}}</p>
                </div>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <div class="label-column">
                <label>Label 2</label>
              </div>
            </div>
            <div class="col">
              <div class="content-column">
                <div>
                  <p>{{contentForLabel2}}</p>
                </div>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <div class="label-column">
                <label>Label 3</label>
              </div>
            </div>
            <div class="col">
              <div class="content-column">
                <div>
                  <p>{{contentForLabel3}}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-6">
          <div class="row">
            <div class="col">
              <div class="label-column">
                <label>Label 4</label>
              </div>
            </div>
            <div class="col">
              <div class="content-column">
                <p style="font-weight: bold; color: grey">Content displayed here in text with inline styling</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </form>
  </div>
</body>

</html>

Answer 2

您只能使用Bootstrap来实现它，因为可以堆叠.row和.col类。例如这样的

form {
  background-color: white;
  margin-top: 30px;
  margin-bottom: 30px;
  justify-content: center;
  align-content: center;
  padding-bottom: 25px;
  width: 100%;
}
.form-area {
  margin-top: 30px;
}
label {
  display: block;
  color: black;
  font-weight: bold;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row">
  <div class="col">
    <form>
      <div class="row">
        <div class="col">
        
          <div class="row">
            <div class="col">
              <label>Label 1</label>
            </div>
            <div class="col">
              <p>{{contentForLabel1}}</p>
            </div>
          </div>
          
          <div class="row">
            <div class="col">
              <label>Label 2</label>
            </div>
            <div class="col">
              <p>{{contentForLabel2}}</p>
            </div>
          </div>
          
          <div class="row">
            <div class="col">
              <label>Label 3</label>
            </div>
            <div class="col">
              <p>{{contentForLabel3}}</p>
            </div>
          </div>
          
        </div>

        <div class="col">
          <div class="row">
            <div class="col">
              <label>Label 4</label>
            </div>
            <div class="col">
              <p style="font-weight: bold; color: grey">
                Content displayed here in text with inline styling
              </p>
            </div>
          </div>
        </div>

      </div>
    </form>
  </div>
</div>

我如何获得引导程序以将带有内容的标签对齐到4列中？

2 个答案: