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

Posted 2023-02-23

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

【英文标题】：How to make the text area occupy entire browser width in Bootsrap-vue while using components

【发布时间】：2020-07-14 17:58:36

【问题描述】：

我正在尝试使用使用 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>

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

而不是像下面这样

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

【参考方案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>

【讨论】：

谢谢，这两种方式都可以，我之前尝试过不使用 div 但它不起作用意味着我当时犯了一些错误。