在使用组件时如何使文本区域在Bootsrap-vue中占据整个浏览器宽度

Question

我正在尝试使用来自Bootstrap-Vue website的组件的输入组的第一个示例>

我的代码如下：

 <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>
使用上面的代码时，我的输入框看起来像这样

而不是下面的样子

如何使它占据整个宽度？

[我正尝试使用Bootstrap-Vue网站上的组件的输入组的第一个示例，我的代码如下：

<... ...>

< [

这是因为您要用b-form-input包装div。无论如何，如果您确定需要将b-form-input带入另一个组件，则将此样式添加到根div标记中：

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

如果没有b-form-input则没有其他项目，那么为什么不将b-form-input放置为没有div包装器的根元素：

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

Answer 1