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

使用上面的代码时，我的输入框如下所示：

而不是下面的样子

如何使它占据整个宽度？

Answer 1

那是因为您用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>