Bootstrap Column Spacing

Question

http://primoburgers.herokuapp.com/menus/lunch

页面左半部分的列似乎与右侧的项目对齐。我想删除左侧各部分之间的空格。例如，汉堡和墨西哥食物部分之间的大空间，以及主菜和软饮料部分之间的空间。我删除了bootstrap类“row”以尝试解决这个问题，但它没有帮助。我使用col-md-6将页面分成两列。

Answer 1

创建一个包含两列的父结构，然后将每个菜单组添加为单独的行（bootstrap允许嵌套的行/列）。

您的结构应如下所示：

<div class="row">
  <div class="col-lg-6"><!-- left parent column -->
    <div class="row">
      <!-- left menu group 1 -->
    </div>
    <div class="row">
      <!-- left menu group 2 -->
    </div>
  </div>
  <div class="col-lg-6"><!-- right parent column -->
    <div class="row">
      <!-- right menu group 1 -->
    </div>
    <div class="row">
      <!-- right menu group 2 -->
    </div>
  </div>
</div>