Bootstrap 4 Bootstrap v4-将表单控件项保留在其中'；s父母-需要什么？_Bootstrap 4

Bootstrap 4 Bootstrap v4-将表单控件项保留在其中'；s父母-需要什么？

bootstrap-4

Bootstrap 4 Bootstrap v4-将表单控件项保留在其中'；s父母-需要什么？,bootstrap-4,Bootstrap 4,参见示例，输入和文本区域位于右侧的容器外部；我想把它们完全放在右边的容器里；我知道是利润把它推到了外面，我怎么能强迫父母完全保留它呢？（嗯，也许是空白而不是空白？太晚了，我已经写了这个问题）我在引导v4的使用中遗漏了什么吗。这应该是一些简单的事情，我不应该手动调整css来补偿利润 html，正文{ 背景颜色：浅灰色； } 部分{ 背景颜色：浅粉色；显示器：flex；弯曲方向：立柱； } 第二节数据录入{ 背景颜色：钢蓝色；位置：相对位置； } 第二节数据录入 >输入，文本区 { 调整大

参见示例，输入和文本区域位于右侧的容器外部；我想把它们完全放在右边的容器里；我知道是利润把它推到了外面，我怎么能强迫父母完全保留它呢？（嗯，也许是空白而不是空白？太晚了，我已经写了这个问题）

我在引导v4的使用中遗漏了什么吗。这应该是一些简单的事情，我不应该手动调整css来补偿利润

html，正文{
背景颜色：浅灰色；
}
部分{
背景颜色：浅粉色；
显示器：flex；
弯曲方向：立柱；
}
第二节数据录入{
背景颜色：钢蓝色；
位置：相对位置；
}
第二节数据录入
>输入，文本区
{
调整大小：无！重要；/*重要用于覆盖stackoverflow css*/
利润率：10px！重要；
}
第二节数据录入
>.btn行动{
显示器：flex；
证明内容：柔性端；
利润率：10px；
}
第二节数据录入
>.btn操作>按钮{
左边距：10px；
}


某个标题
*解释性说明
清楚的
提交

这是我找到的一个有效解决方案：

将.data entry替换为.form group，并添加了

标记

在CSS文件中介绍了这一点：

.form group.form控件{width:-webkit-fill-available；}

将CSS文件中的边距替换为.m-2引导类

看小提琴，我想这是你想要的。

HTML:

好啊我会接受你的答案，因为这可能是一个更好的标准BS4方式！但是为什么你要添加一个表单标签，我并不真的想要一个表单标签，因为我不会对表单进行任何发布。习惯上，你可以毫无问题地删除它。

<head>


<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet"/>
</head>

<!-- uses bootstrap 4 -->
<section class="comments container">
    <h4>some header</h4>

<form>
    <div class="form-group">
        <p>*explanatory note.</p>
        <input placeholder="Mandatory header" class="form-control m-2" />
        <textarea rows="5" cols="80" placeholder="Mandatory text" class="form-control m-2"></textarea>

        <div class="btn-actions">
            <button type="button" class="btn btn-sm btn-secondary">Clear</button>
            <button type="button" class="btn btn-sm btn-success">Submit</button>
        </div>
    </div>
    
    </form>
    
</section>

 html, body {
      background-color:lightgray;
    }
    
    section {
        background-color: lightpink;
        display:flex;
        flex-direction: column;
        width:100%;
    }
    
     section .form-group {
      background-color: steelblue;
      position:relative;
    }
    
    .form-group .form-control {
      width: -webkit-fill-available;
    }

    section .form-group
    > .btn-actions {
        display:flex;
        justify-content: flex-end;
        margin:10px;
    }
    
    
    section .form-group 
    > .btn-actions > button {
        margin-left:10px;
    }