如何在使用bootstrap时删除边距

Question

当我的屏幕处于全宽时，我在尝试定位在一条线上时遇到问题。 col 4继续定位在col 1下。

      <div class="products">
            <div class="container">
              <div class="row">
                <h2>Products</h2>
                  <div class="col-sm-3">
                <div id="cat-1">
                  <p>1</p>
                </div>
              </div>

              <div class="col-sm-3">
                <div id="cat-2">
                  <p>2</p>
                </div>
              </div>

              <div class="col-sm-3">
                <div id="cat-3">
                  <p>3</p>
                </div>
              </div>

              <div class="col-sm-3">
                <div id="cat-4">
                  <p>4</p>
                </div>
              </div>

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

Answer 1

标题正在破坏布局。 只允许将列用作.row的子项。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="products">
   <div class="container">
      <div class="row">
          <div class="col-sm-12">
              <h2>Products</h2>
          </div>
      </div>
      <div class="row">
         <div class="col-sm-3">
            <div id="cat-1">
               <p>1</p>
            </div>
         </div>
         <div class="col-sm-3">
            <div id="cat-2">
               <p>2</p>
            </div>
         </div>
         <div class="col-sm-3">
            <div id="cat-3">
               <p>3</p>
            </div>
         </div>
         <div class="col-sm-3">
            <div id="cat-4">
               <p>4</p>
            </div>
         </div>
      </div>
   </div>
</div>