更新

Question

我正在尝试制作动态生成的菜单。它的结构类似于报纸模板。我做了一些研究并且开始知道使用css flexbox我们可以实现这样的东西。但是我仍然无法实现它。这是我想要的外观： -

要复制此问题： - 点击＆＃39; Bilar＆＃39;菜单项 - ＆gt;检查菜单 - ＆gt;第四个菜单项预计会有点向上，但它会下降。下面是codepen链接和我的代码。任何帮助表示赞赏。

Click this Codepen link to see the current code

＆＃13;

~/.appcfg_oauth2_tokens_java

＆＃13;

Answer 1

您的班级if使用以下响应式col-lg-4：

media query

这意味着一旦您的浏览器宽度高于992px，这些列的宽度为33.33％，应为25％（如果您想要4列）

已编辑：刚看到您的屏幕截图。 css @media (min-width: 992px) { .col-lg-4 { -webkit-box-flex: 0; -ms-flex: 0 0 33.333333%; flex: 0 0 25%; max-width: 33.333333%; } }不会让你做你想做的事。如果内容已修复，您只需在第一个容器中添加第4个菜单，移除flex类就像 codepen 一样（注意我添加了margin-top inline来制作它看起来更好。）

如果内容是dinamic，您可能需要搜索任何其他方式来实现它。我首先想到的是砌砖工作： link

Answer 2

您可以为此布局使用多列。我最后加了check

＆＃13;

.header-navigation {
  height: 80px;
  border-bottom: 2px solid #e50000;
}
.header-navigation .header-brand {
  margin-right: 1.4375rem;
  height: 100%;
}

.header-menu {
  height: 100%;
}$font-stack: OpenSans, Helvetica, sans-serif;

$primary: #e50000;
$primary-hover: #ca0000;
$text-color: #555555;
$white: #ffffff;

$graphic-grey-color: #e1e1e1;
$background-grey-color: #f5f5f5;
$main-dark-color: #202020;
$form-border-color: #dddddd;
$form-active-border-color: #999999;

$navbar-light-color: $main-dark-color;
$link-hover-color: $white;
$link-hover-decoration: none;
$nav-tabs-link-active-bg: $primary;
$navbar-brand-padding-y: 0rem;
$navbar-nav-link-padding-x: 0.9375rem;
$nav-link-padding-y: 0rem;

.header-navigation {
  height: 80px;
  border-bottom: 2px solid $primary;
  .header-brand {
    margin-right: 1.4375rem;
    height: 100%;
  }
}

.header-menu {
  height: 100%;
}

.header-menu-item {
  font-family: $font-stack;
  height: 100%;
  color: $main-dark-color;
  &:hover {
    background-color: $primary;
  }
  + .-collapse {
    z-index: 1000;
    display: none;
    position: absolute;
    top: 80px;
    left: 0px;
    // display: none;
    opacity: 0;
    .menu-item-level2 {
      width: 100vw;
      margin: auto;
      .-level2-main-section {
        padding: 0px;
        background-color: $background-grey-color;
        min-height: 280px;

        .-level2-main-section-row {
          max-width: 100%;
          text-align: center;
          margin: 30px 165px 50px 165px;
          .-level2-menu-column {
            padding: 0px;
            text-align: left;
            // .-level2-menu-container{
            margin-bottom: 30px;
            .-heading {
              margin-bottom: 10px;
              color: $main-dark-color;
              font-size: 20px;
              font-weight: bold;
              line-height: 1.5;
            }
            .-subitems {
              color: $text-color;
              font-size: 16px;
              line-height: 1.88;
            }
            // }
          }
        }
      }
      .-level2-side-section {
        margin: auto;
        padding: 20px;
        background-color: $graphic-grey-color;
        min-height: 280px;
        .-info {
          margin-bottom: 60px;
          .-info-text {
            margin-top: 10px;
            line-height: 1.5;
            font-size: 20px;
            color: $text-color;
            font-weight: normal;
          }
        }
      }
    }
  }
}

.header-menu-item.active {
  background-color: $primary;
  color: $white;
  + .-collapse {
    display: block;
    opacity: 1;
    transition: opacity 500ms linear;
  }
}

.header-menu-list {
  height: 100%;
}

.navbar {
  padding: 0px 0px 0px 30px !important;
  color: $text-color;
}

.header-brandname {
  margin: 10px 0px;
}

.header-logo {
  height: 100%;
  padding: 0px 30px;
  border-left: 1px solid $graphic-grey-color;
}

.menu-wrap {
  display: block;
}

.row.-level2-main-section-row {
  display: block;
  column-count: 3;
}
.-level2-menu-column {
  display: block;
}


.header-menu-item {
  font-family: OpenSans, Helvetica, sans-serif;
  height: 100%;
  color: #202020;
}
.header-menu-item:hover {
  background-color: #e50000;
}
.header-menu-item + .-collapse {
  z-index: 1000;
  display: none;
  position: absolute;
  top: 80px;
  left: 0px;
  opacity: 0;
}
.header-menu-item + .-collapse .menu-item-level2 {
  width: 100vw;
  margin: auto;
}
.header-menu-item + .-collapse .menu-item-level2 .-level2-main-section {
  padding: 0px;
  background-color: #f5f5f5;
  min-height: 280px;
}
.header-menu-item + .-collapse .menu-item-level2 .-level2-main-section .-level2-main-section-row {
  max-width: 100%;
  text-align: center;
  margin: 30px 165px 50px 165px;
}
.header-menu-item + .-collapse .menu-item-level2 .-level2-main-section .-level2-main-section-row .-level2-menu-column {
  padding: 0px;
  text-align: left;
  margin-bottom: 30px;
}
.header-menu-item + .-collapse .menu-item-level2 .-level2-main-section .-level2-main-section-row .-level2-menu-column .-heading {
  margin-bottom: 10px;
  color: #202020;
  font-size: 20px;
  font-weight: bold;
  line-height: 1.5;
}
.header-menu-item + .-collapse .menu-item-level2 .-level2-main-section .-level2-main-section-row .-level2-menu-column .-subitems {
  color: #555555;
  font-size: 16px;
  line-height: 1.88;
}
.header-menu-item + .-collapse .menu-item-level2 .-level2-side-section {
  margin: auto;
  padding: 20px;
  background-color: #e1e1e1;
  min-height: 280px;
}
.header-menu-item + .-collapse .menu-item-level2 .-level2-side-section .-info {
  margin-bottom: 60px;
}
.header-menu-item + .-collapse .menu-item-level2 .-level2-side-section .-info .-info-text {
  margin-top: 10px;
  line-height: 1.5;
  font-size: 20px;
  color: #555555;
  font-weight: normal;
}

.header-menu-item.active {
  background-color: #e50000;
  color: #ffffff;
}
.header-menu-item.active + .-collapse {
  display: block;
  opacity: 1;
  transition: opacity 500ms linear;
}

.header-menu-list {
  height: 100%;
}

.navbar {
  padding: 0px 0px 0px 30px !important;
  color: #555555;
}

.header-brandname {
  margin: 10px 0px;
}

.header-logo {
  height: 100%;
  padding: 0px 30px;
  border-left: 1px solid #e1e1e1;
}

.menu-wrap {
  display: block;
}

.row.-level2-main-section-row {
  display: block;
  column-count: 3;
}

.-level2-menu-column {
  display: block;
}

＆＃13;

<header class="header">
    <nav class="header-navigation navbar navbar-expand-lg">
        <a class="header-brand navbar-brand d-flex align-items-center pull-left" href="#">
            <img src="/static/images/fc-logo.svg" alt="brand-logo">
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#header-navigation" aria-controls="header-navigation"
            aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="header-menu collapse navbar-collapse" id="header-navigation">
            <ul class="header-menu-list navbar-nav mr-auto">
                <li class="nav-item">
                    <a class="header-menu-item nav-link d-flex align-items-center" href="#">
                        <span>Bilar</span>
                    </a>
                    <div class="-collapse">
                        <div class="menu-item-level2 row">
                            <div class="-level2-main-section col-lg-10">
                                <div class="menu-wrap">
                                        <div class="-level2-main-section-row row align-items-start">
                                                <div class="-level2-menu-column -level2-menu-container col-lg-4">
                                                    <div class="-heading">Nya bilar</div>
            
                                                    <div class="-subitems">Personbilar</div>
                                                    <div class="-subitems">Transportbilar</div>
                                                </div>
                                                <div class="-level2-menu-column -level2-menu-container col-lg-4">
                                                    <div class="-heading">Nya bilar</div>
            
                                                    <div class="-subitems">Personbilar</div>
                                                    <div class="-subitems">Transportbilar</div>
                                                    <div class="-subitems">Personbilar</div>
                                                    <div class="-subitems">Transportbilar</div>
                                                    <div class="-subitems">Personbilar</div>
                                                    <div class="-subitems">Transportbilar</div>
                                                    <div class="-subitems">Personbilar</div>
                                                    <div class="-subitems">Transportbilar</div>
                                                    <div class="-subitems">Personbilar</div>
                                                    <div class="-subitems">Transportbilar</div>
                                                </div>
                                                <div class="-level2-menu-column -level2-menu-container col-lg-4">
                                                    <div class="-heading">Nya bilar</div>
            
                                                    <div class="-subitems">Personbilar</div>
                                                    <div class="-subitems">Transportbilar</div>
                                                </div>
                                                <div class="-level2-menu-column -level2-menu-container col-lg-4">
                                                    <div class="-heading">Nya bilar</div>
            
                                                    <div class="-subitems">Personbilar</div>
                                                    <div class="-subitems">Transportbilar</div>
                                                </div>
                                            </div>
                                </div>
                            </div>
                            <div class="-level2-side-section col-lg-2">
                                <div class="-info">
                                    <a class="-info-img" href="#">
                                        <img src="/static/images/car.png" alt="info-image-1">
                                    </a>
                                    <div class="-info-text">
                                        Vilken Yaris ar du?
                                    </div>
                                </div>
                                <div class="-info">
                                    <a class="-info-img" href="#">
                                        <img src="/static/images/car2.png" alt="info-image-2">
                                    </a>
                                    <div class="-info-text">
                                        Basta familjebilen - 7 sittplatser!
                                    </div>
                                </div>
                            </div>
                        </div>
                </li>
                <li class="nav-item ">
                    <a class="header-menu-item nav-link d-flex align-items-center" href="#">
                        <span>Finansiering</span>
                    </a>
                </li>
                <li class="nav-item ">
                    <a class="header-menu-item nav-link d-flex align-items-center" href="#">
                        <span>Service</span>
                    </a>

                </li>
                <li class="nav-item ">
                    <a class="header-menu-item nav-link d-flex align-items-center" href="#">
                        <span>Om oss</span>
                    </a>

                </li>
                <li class="nav-item ">
                    <a class="header-menu-item nav-link d-flex align-items-center" href="#">
                        <span>Min Toyota</span>
                    </a>
                </li>
            </ul>
            </div>
            <a href="#" class="header-logo pull-right  d-flex align-items-center">
                <img src="/static/images/toyota-logo.jpg" alt="brand-logo">
            </a>
    </nav>
</header>

＆＃13;

Link

Answer 3

一种方法是使用CSS column，但不受广泛支持。您可以在此处查看Browser compatibility。

如果您决定这样做，请记住您无法将其与flex结合使用。因此，页面的这一部分没有Bootstrap flex类。

使用column-count: #x表示行中的列数。
使用break-inside: avoid;以避免中断列。

.-level2-main-section-row {
  border: 1px solid;
  -moz-column-count: 3;
  -webkit-column-count: 3;
  column-count: 3;
  column-count: 3;
}

.-level2-menu-column {
  margin-bottom: 10px;
  border: 1px solid red;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}

<div class="menu-wrap">
  <div class="-level2-main-section-row  align-items-start">
    <div class="-level2-menu-column -level2-menu-container ">
      <h1 class="-heading">Nya bilar</h1>

      <div class="-subitems">Personbilar</div>
      <div class="-subitems">Transportbilar</div>
    </div>
    <div class="-level2-menu-column -level2-menu-container ">
      <h1 class="-heading">Nya bilar</h1>

      <div class="-subitems">Personbilar</div>
      <div class="-subitems">Transportbilar</div>
      <div class="-heading">Nya bilar</div>

      <div class="-subitems">Personbilar</div>
      <div class="-subitems">Transportbilar</div>
      <div class="-heading">Nya bilar</div>

      <div class="-subitems">Personbilar</div>
      <div class="-subitems">Transportbilar</div>
      <div class="-heading">Nya bilar</div>

      <div class="-subitems">Personbilar</div>
      <div class="-subitems">Transportbilar</div>
      <div class="-heading">Nya bilar</div>

      <div class="-subitems">Personbilar</div>
      <div class="-subitems">Transportbilar</div>
    </div>
    <div class="-level2-menu-column -level2-menu-container ">
      <h1 class="-heading">Nya bilar</h1>

      <div class="-subitems">Personbilar</div>
      <div class="-subitems">Transportbilar</div>
    </div>
    <div class="-level2-menu-column -level2-menu-container ">
      <h1 class="-heading">Nya bilar</h1>

      <div class="-subitems">Personbilar</div>
      <div class="-subitems">Transportbilar</div>
      <div class="-subitems">Personbilar</div>
      <div class="-subitems">Transportbilar</div>
      <div class="-subitems">Personbilar</div>
      <div class="-subitems">Transportbilar</div>
      <div class="-subitems">Personbilar</div>
      <div class="-subitems">Transportbilar</div>
      <div class="-subitems">Personbilar</div>
      <div class="-subitems">Transportbilar</div>
    </div>
    <div class="-level2-menu-column -level2-menu-container ">
      <h1 class="-heading">Nya bilar</h1>

      <div class="-subitems">Personbilar</div>
      <div class="-subitems">Transportbilar</div>
    </div>
    <div class="-level2-menu-column -level2-menu-container">
      <h1 class="-heading">Nya bilar</h1>
      <div class="-subitems">Personbilar</div>
      <div class="-subitems">Transportbilar</div>
    </div>
  </div>
</div>

检查pen 您可以使用media queries为每页设置不同的列。

更新

列的另一个问题是它不尊重您放置列的顺序。因此，如果对列进行排序很重要，您可以选择masonry或其他一些Javascript库。

这个article是关于这个主题的好读物。

新闻模板像菜单的布局

3 个答案:

更新