Question

我不明白，我如何在Bootstrap 3中自定义输入（表单控件）宽度？

<header>
    <div class="container">
        <div class="row">
            <form role="form" class="form-inline">
                  <div class="form-group">
                      <input type="text" class="form-control" placeholder="Почтовый идентификатор" id="search"> 
                  </div>
                    <input type="button" class="btn  btn-success" value="Найти" onclick="window.location.href = '/result/'+document.getElementById('search').value">
            </form>
        </div>
    </div>
</header>

我可以在没有某些样式（如像素宽度）的情况下执行此操作吗？

Answer 1

更新（已添加W3Schools链接）：我刚刚发现在w3schools.com/bootstrap/bootstrap_forms_sizing.asp上可以找到关于这个问题的非常好的答案。关于如何为输入高度应用.input-lg和.input-sm，或者为输入宽度应用.col-lg-*和.col-sm-，有很好的示例。

原始回答：您是否尝试将Bootstrap Grids与Form和col-xs- ..类一起用于需要堆叠在移动设备上的每个输入字段。类似下面的代码（从Bootstrap粘贴的副本）：

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

我将这些col-xs- ..类应用到您的表单上，并将您的列堆叠在移动设备上（好吧，我只是让我的浏览器窗口更小并且工作正常）。

<div class="container">
        <div class="row">
            <form role="form" class="form-inline">
                <div class="col-xs-12 col-md-2"> 
                    <div class="form-group">  
                        <input type="text" class="form-control" placeholder="Почтовый идентификатор" id="search">  
                    </div>
                </div>
                    <div class="col-xs-6 col-md-1">
                        <input type="button" class="btn  btn-success" value="Найти" onclick="window.location.href = '/result/' + document.getElementById('search').value"/>
                </div>
            </form>
        </div>
    </div>

在桌面设备上，我为这些字段提供了较小的值：col-md-2和col-md-1，但您可能希望以您喜欢的方式微调这些值。

<强>更新您是否考虑过为输入元素使用LESS变量来制作自定义颜色和大小，Bootstrap允许您执行以下操作：“自定义较少的变量以在自定义CSS样式表中定义颜色，大小等。”

如果您查看Bootstrap网站的Customize部分。它允许您自定义表单中的输入元素。较少的变量如： @ input-bg，@ input-color，@ input-base-base，@ input-border 等等在您的情况下可能会有用。例如， @ input-height-base 默认为 .form-control height。

Answer 2

尝试

.form-inline .form-group input {
    width:140px;
}

对于css来操纵

Answer 3

您可以通过向元素

添加.form-group-*来快速调整水平表单中的标签和表单控件的大小

您还可以使用.input-group或.input-group-sm类快速调整.input-group-lg内所有输入和其他元素的大小

输入宽度采用form-inline bootstrap 3

3 个答案: