Question

我正在使用AngularJS练习网络开发。我有一个名为itemList的ul，在我的app.js文件中看起来像这样

bootstrapColumnMdWidth: "6",
itemList: [
              "Item 1",
              "Item 2",
              "Item 3",
              "Item 4",
              "Item 5",
              "Item 6",
              "Item 7",
           ]
},{
bootstrapColumnMdWidth: "6",
itemList: [
              "Item 8",
              "Item 9",
              "Item 10",
              "Item 11",
              "Item 12",
              "Item 13",
              "Item 14",
            ]
        },{

bootstrapColumnWidth是一个动态类，我通过它为一个元素分配bootstrap列宽。我希望两个列表中的项目彼此相邻，因此每个itemList的宽度为6。

所以在我的笔记本电脑上，这看起来像这样：

          "Item 1",           "Item 8",
          "Item 2",           "Item 9",
          "Item 3",           "Item 10",
          "Item 4",           "Item 11",
          "Item 5",           "Item 12",
          "Item 6",           "Item 13",
          "Item 7",           "Item 14",

这正是我想要的;两个列表与两列6列相等。

现在我遇到的问题是，因为我有两个itemLists而不是一个，当我的视图是移动时，它将如下所示：

          "Item 1",
          "Item 2",
          "Item 3",
          "Item 4",
          "Item 5",
          "Item 6",
          "Item 7",

          "Item 8",
          "Item 9",
          "Item 10",
          "Item 11",
          "Item 12",
          "Item 13",
          "Item 14",

列表之间的差距对我来说是一个问题。我仍然希望将我的两个列表与各自的宽度值分开，但在手机上，我希望显示所有项目，两者之间没有间隙。对此有什么快速解决方法吗？

Answer 1

您需要删除＆＃39; margin-bottom＆＃39;从第一个使用CSS获取xs断点的列表：

@media (max-width: $screen-xs-max) {
   .parent-element ul:first-of-type {
      margin-bottom: 0;
   }
}

使用引导列修复不同媒体查询中各节之间的间隙

1 个答案: