Как заставить текстовую область занимать всю ширину браузера в Bootsrap- vue при использовании компонентов - PullRequest
Новая
       31

Как заставить текстовую область занимать всю ширину браузера в Bootsrap- vue при использовании компонентов

0 голосов
/ 02 апреля 2020

Я пытаюсь использовать первый пример групп ввода с использованием компонентов из Bootstrap - Vue веб-сайта

Мой код выглядит следующим образом: 

 <div>
        <b-input-group prepend="Search" class="mt-3">

             <!-- inputbox is a child component -->
                <inputBox></inputBox>

                    <b-input-group-append>
                        <b-button variant="outline-success">Button</b-button>
                        <b-button variant="info">Button</b-button>
                    </b-input-group-append>
          </b-input-group>
  </div>

Мой код компонента inputBox приведен ниже: 

<template>
  <div>
    <b-form-input></b-form-input>
</div>
</template>

При использовании вышеуказанного кода мое поле ввода выглядит следующим образом

enter image description here

вместо того, чтобы выглядеть, как показано ниже

enter image description here

Как я могу заставить его занимать всю ширину?

1 Ответ

2 голосов
/ 02 апреля 2020

Это потому, что вы упаковываете b-form-input с div. В любом случае, если вы уверены, что вам нужно перенести b-form-input в другой компонент, добавьте этот стиль к тегу root div: 

<template>
  <div style="flex: 1 1 0%">
    <b-form-input></b-form-input>
  </div>
</template>

Если нет других элементов, кроме b-form-input, тогда почему бы не поместить b-form-input как элемент root без оболочки div: 

<template>
  <b-form-input></b-form-input>
</template>
...