如何让 Bulma 下拉菜单全宽并居中

Question

我想让 bulma 下拉菜单与视口一样宽并且居中，无论触发器在哪里。下面是示例......关于如何实现这一点的任何想法？将代码段转到完整页面以查看问题。

.dropdown-menu {
  width: 100vw;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.min.css" rel="stylesheet" />
<div class="container level">
  <div class="dropdown is-hoverable level-item">
    <div class="dropdown-trigger">
      <button class="button" aria-haspopup="true" aria-controls="dropdown-menu4">
      <span>Menu 1</span>
    </button>
    </div>
    <div class="dropdown-menu" id="dropdown-menu4" role="menu">
      <div class="dropdown-content">
        <div class="dropdown-item">
          <p>I want this dropdown centered in the viewport</p>
        </div>
      </div>
    </div>
  </div>
  <div class="dropdown is-hoverable level-item">
    <div class="dropdown-trigger">
      <button class="button" aria-haspopup="true" aria-controls="dropdown-menu3">
      <span>Menu 2</span>
    </button>
    </div>
    <div class="dropdown-menu" id="dropdown-menu3" role="menu">
      <div class="dropdown-content">
        <div class="dropdown-item">
          <p>This one should be centered as well</p>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

您可以通过调整 dropdown-menu.

的 left 和 right 位置来实现。

我在下面的示例中使用了 nth-of-type，您可以向每个 dropdown 添加一个 class 以使其更具可读性。

您将需要一个媒体查询来重置这些值，例如：

@media screen and (max-width: 769px) {
  .dropdown.is-hoverable .dropdown-menu {
    left: 0 !important;
    right: 0 !important;
  }
}

fiddle

.dropdown.is-hoverable .dropdown-menu {
  width: 100vw;
}

.dropdown:nth-of-type(1).is-hoverable .dropdown-menu {
  left: initial;
  right: -50vw;
}

.dropdown:nth-of-type(2).is-hoverable .dropdown-menu {
  left: -50vw;
}

@media screen and (max-width: 769px) {
  .dropdown.is-hoverable .dropdown-menu {
    left: 0 !important;
    right: 0 !important;
  }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.min.css" rel="stylesheet" />
<div class="container level">
  <div class="dropdown is-hoverable level-item">
    <div class="dropdown-trigger">
      <button class="button" aria-haspopup="true" aria-controls="dropdown-menu4">
        <span>Menu 1</span>
      </button>
    </div>
    <div class="dropdown-menu" id="dropdown-menu4" role="menu">
      <div class="dropdown-content">
        <div class="dropdown-item">
          <p>I want this dropdown centered in the viewport</p>
        </div>
      </div>
    </div>
  </div>
  <div class="dropdown is-hoverable level-item">
    <div class="dropdown-trigger">
      <button class="button" aria-haspopup="true" aria-controls="dropdown-menu3">
        <span>Menu 2</span>
      </button>
    </div>
    <div class="dropdown-menu" id="dropdown-menu3" role="menu">
      <div class="dropdown-content">
        <div class="dropdown-item">
          <p>This one should be centered as well</p>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="container">

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi consequuntur, est expedita velit labore atque dolores voluptatum eius voluptatem excepturi eum pariatur. Officia pariatur, quae expedita consectetur voluptatibus vitae a.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi consequuntur, est expedita velit labore atque dolores voluptatum eius voluptatem excepturi eum pariatur. Officia pariatur, quae expedita consectetur voluptatibus vitae a.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi consequuntur, est expedita velit labore atque dolores voluptatum eius voluptatem excepturi eum pariatur. Officia pariatur, quae expedita consectetur voluptatibus vitae a.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi consequuntur, est expedita velit labore atque dolores voluptatum eius voluptatem excepturi eum pariatur. Officia pariatur, quae expedita consectetur voluptatibus vitae a.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi consequuntur, est expedita velit labore atque dolores voluptatum eius voluptatem excepturi eum pariatur. Officia pariatur, quae expedita consectetur voluptatibus vitae a.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi consequuntur, est expedita velit labore atque dolores voluptatum eius voluptatem excepturi eum pariatur. Officia pariatur, quae expedita consectetur voluptatibus vitae a.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi consequuntur, est expedita velit labore atque dolores voluptatum eius voluptatem excepturi eum pariatur. Officia pariatur, quae expedita consectetur voluptatibus vitae a.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi consequuntur, est expedita velit labore atque dolores voluptatum eius voluptatem excepturi eum pariatur. Officia pariatur, quae expedita consectetur voluptatibus vitae a.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi consequuntur, est expedita velit labore atque dolores voluptatum eius voluptatem excepturi eum pariatur. Officia pariatur, quae expedita consectetur voluptatibus vitae a.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi consequuntur, est expedita velit labore atque dolores voluptatum eius voluptatem excepturi eum pariatur. Officia pariatur, quae expedita consectetur voluptatibus vitae a.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi consequuntur, est expedita velit labore atque dolores voluptatum eius voluptatem excepturi eum pariatur. Officia pariatur, quae expedita consectetur voluptatibus vitae a.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi consequuntur, est expedita velit labore atque dolores voluptatum eius voluptatem excepturi eum pariatur. Officia pariatur, quae expedita consectetur voluptatibus vitae a.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi consequuntur, est expedita velit labore atque dolores voluptatum eius voluptatem excepturi eum pariatur. Officia pariatur, quae expedita consectetur voluptatibus vitae a.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi consequuntur, est expedita velit labore atque dolores voluptatum eius voluptatem excepturi eum pariatur. Officia pariatur, quae expedita consectetur voluptatibus vitae a.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi consequuntur, est expedita velit labore atque dolores voluptatum eius voluptatem excepturi eum pariatur. Officia pariatur, quae expedita consectetur voluptatibus vitae a.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi consequuntur, est expedita velit labore atque dolores voluptatum eius voluptatem excepturi eum pariatur. Officia pariatur, quae expedita consectetur voluptatibus vitae a.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi consequuntur, est expedita velit labore atque dolores voluptatum eius voluptatem excepturi eum pariatur. Officia pariatur, quae expedita consectetur voluptatibus vitae a.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi consequuntur, est expedita velit labore atque dolores voluptatum eius voluptatem excepturi eum pariatur. Officia pariatur, quae expedita consectetur voluptatibus vitae a.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi consequuntur, est expedita velit labore atque dolores voluptatum eius voluptatem excepturi eum pariatur. Officia pariatur, quae expedita consectetur voluptatibus vitae a.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi consequuntur, est expedita velit labore atque dolores voluptatum eius voluptatem excepturi eum pariatur. Officia pariatur, quae expedita consectetur voluptatibus vitae a.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi consequuntur, est expedita velit labore atque dolores voluptatum eius voluptatem excepturi eum pariatur. Officia pariatur, quae expedita consectetur voluptatibus vitae a.</p>
</div>

如何让 Bulma 下拉菜单全宽并居中

How to have a Bulma dropdown be full width and centered

css

bulma