Bootstrap 4：强制输入表单占据整个宽度答案

【问题标题】：Bootstrap 4: Force input form to take up entire widthBootstrap 4：强制输入表单占据整个宽度
【发布时间】：2020-11-04 13:33:55
【问题描述】：

我试图强制搜索框占据容器的整个宽度，但我只能让它占据大约一半的宽度。下面是一些有代表性的代码：

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="input-group">
                <input id="submitted_word" type="text" class="flex-fill mr-2 form-control" placeholder="Enter Words Here">
                <div class="input-group-append">
                    <button id="submit_button" class="btn btn-primary" type="button">Submit Word</button>
                </div>
            </div>
        </div>
    </div>

还有一个指向 JSFiddle 的链接：http://jsfiddle.net/ovLab58u/

我已经关注了这里列出的每一个答案，但似乎没有任何效果：Bootstrap 4 inline form full width

【问题讨论】：

将.input-group 设为块元素或将width: 100% 添加到其中
“块元素”是什么意思？
当前元素的显示属性为table。将其设置为 block 以使用完整长度。

标签： html css twitter-bootstrap

【解决方案1】：

只需将display: block 样式添加到具有input-group 类的div 作为内联样式或作为外部css 类

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet"/>


    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="input-group" style="display: block;">
                    <input id="submitted_word" type="text" class="flex-fill mr-2 form-control" placeholder="Enter Words Here">
                    <div class="input-group-append">
                        <button id="submit_button" class="btn btn-primary" type="button">Submit Word</button>
                    </div>
                </div>
            </div>
        </div>

【讨论】：

是的 - 这行得通。不知道为什么要包含这个特定版本的 Bootstrap - 4.0.0-alpha.2 - 但是从表更改为块就可以了。

【解决方案2】：

我只是将来自https://getbootstrap.com/docs/4.4/getting-started/introduction/ 的引导 v4.4 CDN 添加到您的代码中，并且还添加了一个您没有在代码中关闭的“div 关闭标签”。它工作正常。像下面的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
   
   <div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="input-group">
                <input id="submitted_word" type="text" class="flex-fill mr-2 form-control" placeholder="Enter Words Here">
                <div class="input-group-append">
                    <button id="submit_button" class="btn btn-primary" type="button">Submit Word</button>
                </div>
            </div>
        </div>
    </div>
    </div>
    
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    
</body>
</html>

【讨论】：