Question

我想要一个与视口一样宽的布尔下拉列表，无论触发器在哪里，都会居中。示例如下......关于如何实现这一点的任何想法？将代码段整整一页以查看问题。

.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

您可以通过调整This error in stops in the fallowing line (at Com.Google.Gson.GsonBuilder): public unsafe global::Com.Google.Gson.GsonBuilder ExcludeFieldsWithModifiers (params int[] p0) { if (id_excludeFieldsWithModifiers_arrayI == IntPtr.Zero) id_excludeFieldsWithModifiers_arrayI = JNIEnv.GetMethodID (class_ref, "excludeFieldsWithModifiers", "([I)Lcom/google/gson/GsonBuilder;"); IntPtr native_p0 = JNIEnv.NewArray (p0); try { JValue* __args = stackalloc JValue [1]; __args [0] = new JValue (native_p0); global::Com.Google.Gson.GsonBuilder __ret = global::Java.Lang.Object.GetObject<global::Com.Google.Gson.GsonBuilder> (JNIEnv.CallObjectMethod (((global::Java.Lang.Object) this).Handle, id_excludeFieldsWithModifiers_arrayI, __args), JniHandleOwnership.TransferLocalRef); return __ret; } finally { if (p0 != null) { JNIEnv.CopyArray (native_p0, p0); JNIEnv.DeleteLocalRef (native_p0); } } }的{{1}}和left位置来实现此目的。

我在下面的示例中使用了right，您可以为每个dropdown-menu添加一个类，以使其更具可读性。

您需要媒体查询来重置值，例如：

nth-of-type

fiddle

＆＃13;

dropdown

＆＃13;

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

＆＃13;

如何将Bulma下拉列表设置为全宽并居中

1 个答案: