web-dev-qa-db-ja.com

bootstrap-vueでのカスタムスタイルのレンダリング

Bootstrap-Vueを使用するドロップダウンメニューコンポーネントにいくつかのカスタムスタイルを追加しようとしています。私はドキュメントを使用しています ここ 。

これが私のテンプレートです：

<div class="container">
  <b-dropdown id="dropdownMenuButton" text="Dropdown Button" no-caret class="custom-dropdown">
    <b-dropdown-item>First Action</b-dropdown-item>
    <b-dropdown-item>Second Action</b-dropdown-item>
    <b-dropdown-item>Third Action</b-dropdown-item>
    <b-dropdown-divider></b-dropdown-divider>
    <b-dropdown-item>Something else here...</b-dropdown-item>
    <b-dropdown-item disabled>Disabled action</b-dropdown-item>
  </b-dropdown>
</div>

#dropdownMenuButtonのスタイルを設定できることがわかりましたが、ドロップダウンがブラウザーでレンダリングされると、＃dropdownMenuButton内に要素が作成され、スタイルを設定できません。私はこのようにそうしようとしました：

<style scoped>
  #dropdownMenuButton > button {
    width: 100%;
  }

  #dropdownMenuButton__BV_toggle_ {
    width: 100%;
  }
</style>

しかし、運がありません。参考までに、作成されるボタンのIDはdropdownMenuButton__BV_toggle_です。

javascripthtmlcssvue.jsbootstrap-vue
5
sandramedina

これは、スタイルをコンポーネントにスコープするためであり、bootstrap vueドロップダウンは別のコンポーネントであるため、スコープスタイルではこれを行うことができません。

https://vue-loader.vuejs.org/guide/scoped-css.html

このようにスコープ属性を削除してみてください。

<style>
  #dropdownMenuButton > button {
    width: 100%;
  }

  #dropdownMenuButton__BV_toggle_ {
    width: 100%;
  }
</style>
9
Maantje

グローバルスタイルを乱雑にしたくない場合は、/deep/キーワードを使用して子コンポーネントに影響を与えることもできます。

<style scoped>
  /deep/ #dropdownMenuButton > button {
    width: 100%;
  }

  /deep/ #dropdownMenuButton__BV_toggle_ {
    width: 100%;
  }
</style>
4
Randomtheories