如何将引导表单控制填充设置为 0 px

Posted

技术标签:

【中文标题】如何将引导表单控制填充设置为 0 px【英文标题】:How to set bootstrap form-control padding to 0 px 【发布时间】:2020-10-08 09:21:01 【问题描述】:

我在将 Bootstrap 表单控件填充设置为 0 时遇到问题。我尝试在样式中添加 .form-control 类但没有成功。我相信应该可以在样式块中覆盖 CSS 类的一些属性。

如何将.form-control 填充设置为 0?

<wicket:head xmlns:wicket="http://wicket.apache.org/">
 <styles>
     .form-control 
        padding: 0px;
     

 </styles>
</wicket:head>
<wicket:panel xmlns="http://www.w3.org/1999/xhtml" xmlns:wicket="http://wicket.apache.org/">
    <div class="col-xs-12">
        <div class="col-xs-12">
            <div class="form-group">
                <div class="col-sm-3">
                    <input type="submit" value="Request" class="btn btn-danger"/>
                </div>

                <div class="col-sm-3">
                    <label for="quotationId" wicket:id="quotationIdLabel"></label>
                    <div>
                        <input wicket:id="quotationId" type="text" size="20"/>
                    </div>
                </div>

                <div class="col-sm-3">
                    <label for="product" wicket:id="productLabel"></label>
                    <div>
                        <select class="form-control" wicket:id="product"/>
                    </div>
                </div>

                <div class="col-sm-3">
                    <label for="contract" wicket:id="contractLabel"></label>
                    <div>
                        <input type="hidden" wicket:id="contract"/>
                    </div>
                </div>

                <div class="col-sm-3" style="padding: 0">
                    <label for="customer" wicket:id="customerLabel"></label>
                    <div>
                        <input class="form-control" type="hidden" wicket:id="customer"/>
                    </div>
                </div>

                <div class="col-sm-3">
                    <label for="serviceLevel" wicket:id="serviceLevelLabel"></label>
                    <div>
                        <select class="form-control" wicket:id="serviceLevel"/>
                    </div>
                </div>

                <div class="col-sm-3">
                    <label for="equipmentType" wicket:id="equipmentTypeLabel"></label>
                    <div>
                        <input class="form-control" type="hidden" wicket:id="equipmentType"/>
                    </div>
                </div>

                <div class="col-sm-3">
                    <label for="commodity" wicket:id="commodityLabel"></label>
                    <div>
                        <select class="form-control" wicket:id="commodity"/>
                    </div>
                </div>

                <span class="col-sm-3">
                    <label for="originCountry" wicket:id="originCountryLabel"></label>
                    <div>
                        <input type="hidden" style="display: inline-block;" wicket:id="originCountry"/>
                    </div>
                </span>

                <div class="col-sm-3">
                    <label for="originDgfStation" wicket:id="originDgfStationLabel"></label>
                    <div>
                        <input type="hidden" wicket:id="originDgfStation"/>
                    </div>
                </div>

                <div class="col-sm-3">
                    <label for="destinationCountry" wicket:id="destinationCountryLabel"></label>
                    <div>
                        <input type="hidden" wicket:id="destinationCountry"/>
                    </div>
                </div>

                <div class="col-sm-3">
                    <label for="destinationDgfStation" wicket:id="destinationDgfStationLabel"></label>
                    <div>
                        <input type="hidden" wicket:id="destinationDgfStation"/>
                    </div>
                </div>

                <div class="col-sm-3">
                    <label for="shippingTerms" wicket:id="shippingTermsLabel"></label>
                    <div>
                        <select class="form-control" wicket:id="shippingTerms"/>
                    </div>
                </div>

            </div>

            <br/>
        </div>
    </div>

    <div class="clearfix"></div>

</wicket:panel> 

【问题讨论】:

【参考方案1】:

将 0 填充的类“p-0”添加到您想要的 div,

class="other-class p-0"

【讨论】:

【参考方案2】:

尝试更具体的选择器,如下所示:

.form-group .form-control 
    padding: 0;

【讨论】:

以上是关于如何将引导表单控制填充设置为 0 px的主要内容,如果未能解决你的问题,请参考以下文章

UICollectionViewCell 填充

Firefox 和 Opera/Chrome/IE 中的表单填充差异

使用 Combobox 控制表单

无法更改 css 模态引导程序。引导程序中的模态淡入淡出自动添加填充左 15px

几秒后,Jquery动画()响应非常缓慢

引导表单间距已关闭