Question

我有一个两列布局，主要部分带有选项卡式UI，右侧有一个侧边栏。在较大的屏幕上，主柱的宽度是流动的，而侧栏的宽度应该设置。在较小的屏幕上，侧栏应重新定位在主要部分下方，主杆和侧杆部分都是100％宽。

我正在尝试构建选项卡式UI，以便在主要部分不足以显示其所有选项卡时水平滚动。我遇到的问题是，当屏幕无法适应所有选项卡时，侧边栏被推离屏幕右侧，这会触发整个页面上的水平滚动，并且不会在选项卡式UI上触发水平滚动条。

我认为这是因为flexbox优先考虑主列中的空格而不是强制滚动条。

在我的Codepen示例中，我正在使用Bootstrap的网格并使用移动优先方法。设置1000px的最小宽度断点（围绕CSS的第29行）会导致侧边栏在主内容下重新定位，并允许选项卡水平滚动。不幸的是，我不认为这对我有用，因为我的布局没有一定数量的标签。

您可以在我的codepen中查看我的进度： https://codepen.io/scobban/pen/pVqeKR

我发现的唯一与我的问题密切相关的帖子是horizontally scrolling flex child，但它似乎没有帮助我。

感谢您的帮助。

以下是HTML：

<div class="wrap">
  <header class="header">
    Header Nav Bar
  </header>
  <div class="l-flex">
    <div class="l-main">
      <h1>Main</h1>
      <ul class="nav nav-tabs">
        <li>
          <a class="tab">Pizzas</a></li>
        <li><a class="tab">Subs</a></li>
        <li class="active"><a class="tab">Salads</a></li>
        <li><a class="tab">Entress</a></li>
        <li><a class="tab">Daily Specials</a></li>
        <li><a class="tab">Side Dishes</a></li>
        <li><a class="tab">Toppings</a></li>
        <li><a class="tab">Dressings</a></li>
        <li><a class="tab">Utensils</a></li>
      </ul>
    </div>
    <div class="l-side l-side-right">
      <div class="l-side-section">
        <h2>Sidebar</h2>
      </div>
    </div>
  </div>
</div>

这是我的scss：

$light: lightblue;
$shadow: rgba(0, 0, 0, 0.16);
$navheight: 51px;

.header {
  background-color: black;
  height: $navheight;
}

.l-flex {
  display: display;
}
.l-main {
  min-height: 100vh;
  padding: 0 2em;
  flex: 1;
}
.l-side {
  flex: 0 0 21em;
  background-color: $light;
  .l-side-section {
    padding: 1em 2em;
  }
  &.l-side-right {
    box-shadow: inset 6px 0px 6px -6px $shadow;
  }
}

@media (min-width: 1000px) {
  .l-flex {
    display: flex;
  }
}

.nav-tabs {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  li {
    display: inline-block;
    float: none;
  }
}

Answer 1

我对您的HTML和CSS进行了一些更改，并且在没有移动优先方法的情况下工作正常 -

＆＃13;

$light: lightblue;
$shadow: rgba(0, 0, 0, 0.16);
$navheight: 51px;

.header {
  background-color: black;
  height: $navheight;
}

.l-flex {
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-flex-direction: row;
  flex-direction: row;
}
.l-main {
  min-height: 100vh;
  padding: 0 2em;
  min-width:calc(100% - 21em);
  max-width: 100%;    
}
.l-side {
  flex: 1;
  background-color: $light;
  .l-side-section {
    padding: 1em 2em;
  }
  &.l-side-right {
    box-shadow: inset 6px 0px 6px -6px $shadow;
  }
}



.nav-tabs {
  flex-wrap: nowrap; 
  white-space: nowrap;
  li {
    display: inline-block;
    float: none;
  }
}

.tabs-container{
  overflow-x: auto;
  overflow-y: hidden;
  min-width:calc(100% - 21em);
}

＆＃13;

<div class="wrap">
  <header class="header">
    Header Nav Bar
  </header>
  <div class="l-flex">
    <div class="l-main">
      <h1>Main</h1>
      <div class="tabs-container">
      <ul class="nav nav-tabs">
        <li>
          <a class="tab">Pizzas</a></li>
        <li><a class="tab">Subs</a></li>
        <li class="active"><a class="tab">Salads</a>         </li>
        <li><a class="tab">Entress</a></li>
        <li><a class="tab">Daily Specials</a></li>
        <li><a class="tab">Side Dishes</a></li>
        <li><a class="tab">Toppings</a></li>
        <li><a class="tab">Dressings</a></li>
        <li><a class="tab">Utensils</a></li>
      </ul>
      </div>
    </div>
    <div class="l-side l-side-right">
      <div class="l-side-section">
        <h2>Sidebar</h2>
      </div>
    </div>
  </div>
</div>

＆＃13;

link- https://codepen.io/anon/pen/ZRXYyd 希望这有帮助。

快乐的编码。

使用设置宽度侧边栏在flexbox中水平滚动列表

1 个答案: