Bootstrap - 剖分和div定位

我正在使用Bootstrap模板構建網站。我有2個問題，我正在努力解決：Bootstrap - 剖分和div定位

1）當我把我的HTML代碼放入<節>時，自動將某種頂邊距/填充應用於該部分。沒有影響該部分的CSS代碼。我似乎無法控制頂部/底部應用了多少填充/邊距。

有人會知道這是否正常，我該如何控制間距的數量？ 2）如果我不使用該部分，而是使用div來分隔我的代碼的每個部分，則文本將在我的頁面頂部正確無間隔地顯示。我嘗試使用一些CSS，但在任何嘗試失敗。這是我最近的和基本的嘗試（也沒有）

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

感謝您的幫助 - 我曾嘗試添加和刪除部分，使用引導電網，一個表，但是這一切仍然得到要麼擠壓在一起（如果我不不要使用部分）或太遠（如果我使用部分）。

HTML代碼：

<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>

來源

2017-10-20 Letizia

你能提供與Q2類伴隨而來的HTML的樣本？ – TidyDev

現在加入，謝謝！ – Letizia

我試圖操縱你的問題，但從我的最後看起來沒問題？我們可以在哪裏查看完整頁面預覽？ – Vincent1989

其中施加Q2類？嘗試以下操作：

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

所有樣式的工作：

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

來源

2017-10-21 17:04:18

這工作！謝謝！！！！！（僅供參考，我沒有指定位置，我只爲.q2輸入margin-top） – Letizia

位置註釋例如，好！我很樂意幫助你） –

Bootstrap - 剖分和div定位

回答

相關問題