时间戳

首页 > 解决方案 > 如何从我的 Bootstrap 网格列中删除空白空间？

html - 如何从我的 Bootstrap 网格列中删除空白空间？

问题描述

我有一个搜索过滤器，其中包含搜索词的输入字段、两个日期选择器和两个按钮：

<div id="search-holder">
    <div id="search-box">
        <div class="form-group row">
            <div class="col-lg-10 col-md-9 col-sm-9 form-group row">
                <div class="col-lg-8 col-md-8 col-sm-6">
                    <input id="searchResident" type="text" class="form-control search-input col-md-10" data-bind="value: mainDataSearchWorker, valueUpdate: 'afterkeydown', enterkey: mainDataRefreshData" placeholder="@SharedResources.Index.SearchNurse" />
                </div>
                <div class="col-lg-2 col-md-2 col-sm-3">
                    <input id="searchIntakeDateFrom" type="text" class="form-control search-date pointer picker" data-bind="datePicker: mainDataSearchDateFrom, maxDate: mainDataSearchDateTo, valueUpdate: 'afterkeydown', enterkey: mainDataRefreshData" placeholder="@SharedResources.Index.SearchDateFrom" />
                </div>
                <div class="col-lg-2 col-md-2 col-sm-3">
                    <input id="searchIntakeDateTo" type="text" class="form-control search-date pointer picker" data-bind="datePicker: mainDataSearchDateTo, minDate: mainDataSearchDateFrom, valueUpdate: 'afterkeydown', enterkey: mainDataRefreshData" placeholder="@SharedResources.Index.SearchDateTo" />
                </div>
            </div>
            <div class="col-lg-2 col-md-3 col-sm-3 form-group row">
                <div>
                    <button type="button" id="search" class="btn btn-newline" data-bind="click: function() {mainDataRefreshData()}"> @SharedResources.Index.Search</button>
                    <button class="btn btn-sm leftmargin10" title="@SharedResources.Index.Reset" data-bind="click: function() {mainDataResetSearch()}">
                        <span class="fa fa-repeat"></span>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

但是，搜索词“searchResident”的输入字段没有完全伸展，我在输入字段和日期选择器字段之间有空白：

在此处输入图像描述

如何完全拉伸“searchResident”输入字段，使输入元素之间没有空白空间？

https://www.bootply.com/EAkJ1KHlla

标签： htmlcsstwitter-bootstrapbootstrap-4

解决方案

    <input id="searchResident" type="text" class="form-control search-input 
**col-md-10**" data-bind="value: mainDataSearchWorker, valueUpdate: 
'afterkeydown', enterkey: mainDataRefreshData"placeholder="@SharedResources.Index.SearchNurse">

您的输入有一个col-md-10类，该类将其容器的最大宽度设置为 83%。

将其更改为col-md-12即可解决您的问题。

推荐阅读