Как сделать вкладку полной ширины в Bootstrap-Vue?

Question

Как сделать вкладку полной ширины в Bootstrap-Vue?

1

У меня есть кое-что как это из Документов в bootstrap-vue:

Карточка с вкладками:

Итак, как мне спроектировать вкладки следующим образом:

Мой текущий код:

  <b-card no-body>
    <b-tabs card>
      <b-tab title="Tab 1" active>
        Tab Contents 1
      </b-tab>
      <b-tab title="Tab 2">
        Tab Contents 2
      </b-tab>
    </b-tabs>
  </b-card>

quanpham0805 09 нояб. 2018, в 00:03

Источник

0

ты попробовал мой ответ?
Boussadjra Brahim 08 нояб. 2018, в 23:07

Теги:

javascript

vue.js

css

frameworks

bootstrap-vue

2 ответа

2

Вы можете использовать title-item-class="w-50" чтобы каждый заголовок занимал 50% ширины.

<b-card no-body>
  <b-tabs card>
    <b-tab title="Tab 1" active title-item-class="w-50">
      Tab Contents 1
    </b-tab>
    <b-tab title="Tab 2" title-item-class="w-50">
      Tab Contents 2
    </b-tab>
  </b-tabs>
</b-card>

ittus 08 нояб. 2018, в 20:10

0

Получается так: Результат Есть ли способ, которым я мог бы уменьшить вкладки в верхней части карты? Что означает, что вкладки занимают полный размер заголовка карты?
quanpham0805 08 нояб. 2018, в 22:58

Ещё вопросы

Получается так: Результат Есть ли способ, которым я мог бы уменьшить вкладки в верхней части карты? Что означает, что вкладки занимают полный размер заголовка карты?

Boussadjra Brahim · Accepted Answer · 2018-11-08T20-01-00.000Z

1

Лучший ответ

Вы можете добавить следующие простые правила CSS и добавить класс full-width в b-card:

       <b-card no-body class="full-width" >
        ...   

      .full-width .card-header-tabs {
       margin-right: -21px;
       margin-left: -21px;
    }

   .full-width .nav-tabs .nav-item {
       margin-bottom: -1px;
       flex-grow: 1;
       text-align: center;
   }

и все будет сделано

проверьте этот код и код коробки

Boussadjra Brahim 08 нояб. 2018, в 20:01

0

Я попробовал ваше решение, и вот что я получил: Результат Это круто, но он работает только с тегом <style> вместо тега <style scoped>, что немного сложно понять почему. Кроме того, есть ли способ, которым я мог бы уменьшить вкладки в верхней части карты?
quanpham0805 08 нояб. 2018, в 23:25
0

так что не так с моим ответом, я могу это исправить
Boussadjra Brahim 08 нояб. 2018, в 23:26
0

я добавил text-align: center; свойство центрировать ваши элементы текста
Boussadjra Brahim 08 нояб. 2018, в 23:30
0

Поэтому я добавил "margin-top: -13px;" в ".card-header-tabs", и он работает именно так, как я хочу: Результат , но я не могу использовать тег <style scoped>, если я использую там "scoped", CSS, который вы сказали мне добавить, не работает ,
quanpham0805 08 нояб. 2018, в 23:33
0

к сожалению, мы не можем использовать их в определенном стиле :(
Boussadjra Brahim 08 нояб. 2018, в 23:37
0

спасибо за принятие моего ответа, и когда я получу лучшее решение, я обновлю свой ответ
Boussadjra Brahim 08 нояб. 2018, в 23:45
0

Поскольку я не могу использовать свой стиль в области видимости, могу ли я сделать CSS уникальным, чтобы он не влиял на другие компоненты в моем проекте?
quanpham0805 08 нояб. 2018, в 23:57
1

я пытаюсь найти способ сделать это уникальным
Boussadjra Brahim 09 нояб. 2018, в 00:01
2

Добавьте класс к вашей b-карточке, например class = "big-card", затем добавьте префикс CSS к этому классу. Например: .big-card .card-header-tabs {...}. Тогда CSS будет применяться только к вкладкам заголовка карты в пределах больших карт
nardnob 09 нояб. 2018, в 14:04
1

@nardnob спасибо большое
Boussadjra Brahim 09 нояб. 2018, в 14:22
2

@ quanpham0805 я обновил свой ответ предложением nardnob
Boussadjra Brahim 09 нояб. 2018, в 14:25

Показать ещё 9 комментариев