Question

我正在使用Bootstrap模板来构建网站。我有两个问题我正在努力解决：

1）当我将HTML代码放入＆lt;部分＆gt;，自动将某种上边距/填充应用于该部分。没有影响该部分的CSS代码。我似乎无法控制在顶部/底部应用多少填充/边距。

有人知道这是否正常，我该如何控制间距？

2）如果我不使用该部分而只使用div来分隔我的代码的每个部分，则文本在我的页面顶部没有任何间距。我尝试使用一些CSS，但在任何尝试都失败了。这是我最近的基本尝试（也失败了）

.q2 {
  position: relative;
  margin-top: 20px;
}

感谢您的帮助 - 我尝试添加和删除部分，使用引导网格，一个表，但它仍然被压扁在一起（如果我不使用部分）或太远（如果我使用部分））。

HTML code：

<section>
  <div class="container">
  <form action="sqlQuery.php" method="post" name="foundationsurvey">
    <div class="row">
      <div class="col-12 text-center pb-3">
        <label for="Q1">Q1</label>
      </div>
      </div>
      <div class="row">
        <div class="col-sm-12 text-left ml-4">
          <input type="radio" id="dry" required> <label for="dry"> Dry </label>
        </div>
      </div>
      <div class="row">
        <div class="col-12 text-left ml-4">
          <input type="radio" id="normal" required> <label for="normal"> Normal</label>
        </div>
      </div>
</div>

    <!--Q2-->
      <div class="container">
        <div class="row">
          <div class="col-12">
            <label for="Q2">Q2</label>
          </div>
        </div>
          <div class="row">
            <div class="col">
              <input type="text" name="product1" placeholder="Brand, Product Name" required>
            </div>
              <div class="col">
                <input type="text" name="product2" placeholder="Brand, Product Name" required>
              </div>
         </div>
        </div>
  </section>
    </header>

Answer 1

应用q2类在哪里？尝试以下方法：

... <div class="container q2"> ...

所有风格都有效：

section {
    margin-top: 150px;
}
.q2 {
    /* position: relative; */
    margin-top: 20px;
}

Bootstrap - 部分和div定位

1 个答案: