Question

我使用bootstrap创建一个网页，我在流体容器内有两排。我在第二行上方创建了一个水平搜索区域（表单）。它没有扩展到列的整个宽度，我无法弄清楚为什么或我必须应用什么类来使它扩展到整个列的宽度。

这是我的代码：

<div class ="container-fluid">
    <div class ="row" style ="margin-right: 15%"> <!-- Row for location search -->
        <div class="col-sm-4" style="max-width:400px;">
        </div>
        <div class="col-sm-8"> <!-- For direction search button -->
            <form action="" class="form-inline" role="search">
                <div class="form-group-stylish">
                    <button class="btn btn-primary" type="submit" style="max-width: 120px;">Search</button>
                    <input type="text" class="form-control" placeholder="Enter Start Location">
                    <input type="text" class="form-control" placeholder="Enter Destination">
                </div>
            </form>
        </div>
    </div> <!-- End row for location search -->
    <div class = "row top-buffer-small" style="margin-right: 15%">
        <div class = "col-sm-4" style="max-width:400px;">
            <div class ="img" style="border: 5px solid #e83724; border-radius: 20px; height: 100px; background-color: white;">
                <h2 class ="text-center" style="margin-top: 5px;">Filter Search Results</h2>
            </div>
        </div>
        <div class="col-sm-8">
            <div class="embed-responsive embed-responsive-4by3">
                <iframe class="embed-responsive-item" src="https://www.google.com/maps/embed/v1/directions?origin=Madison+WI
                    &destination=Milwaukee+WI&key=XXXXXXXX">
                </iframe>
            </div>
        </div>
    </div> <!-- End Row for Search filters and map-->
</div> <!-- End container for search filters and map -->

以下是目前的截图（因为我省略了我的API密钥），并绘制了一个箭头以显示我想要完成的内容。我希望开始和结束位置搜索框保持相同的大小，只是扩展了相同的数量以填充列的其余部分。

目前的页面截图：

我怎样才能做到这一点？谢谢！

Answer 1

尝试将button input与col-sm-8分成三列，因为col-sm-已在上面定义： <div class="form-group-stylish"> <div class="col-sm-1"> <button class="btn btn-primary" type="submit" style="max-width: 120px;">Search</button> </div> <div class="col-sm-4"> <input type="text" class="form-control" placeholder="Enter Start Location"> </div> <div class="col-sm-7"> <input type="text" class="form-control" placeholder="Enter Destination"> </div>的值取决于您的需求。你可以免费设置它。

pm2

Answer 2

做两处更改。

1.从form-inline标记中删除课程form 输入和选择默认情况下在Bootstrap中应用了width: 100%;。在内联表单中，它重置为width: auto;。根据您的布局，可能需要额外的自定义宽度。

2。在表单结构中添加行和列。

<form action="" role="search">
                    <div class="form-group-stylish row">
                        <div class="col-sm-2">
                            <button class="btn btn-primary" type="submit" style="max-width: 120px;">Search</button>
                        </div>
                        <div class="col-sm-5">
                            <input type="text" class="form-control" placeholder="Enter Start Location">
                        </div>
                        <div class="col-sm-5">
                            <input type="text" class="form-control" placeholder="Enter Destination">
                        </div>
                    </div>
                </form>

确保在使用row之前添加col。否则您的代码可能会运行，但您没有遵循BootStrap标准（ .container＆gt; .row＆gt; .col ）。

使水平搜索表单填充列空间引导程序

2 个答案: