使用组件时如何使文本区域在Bootstrap-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>

使用上述代码时，我的输入框是这样的

而不是像下面这样

如何，我可以让它占据整个宽度？

Answer 1

那是因为你用div 包裹了b-form-input。无论如何，如果您确定需要将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>