如何缩小导航栏表单输入框的宽度？答案

【问题标题】：How can I shrink the width of a navbar form's input boxes?如何缩小导航栏表单输入框的宽度？
【发布时间】：2016-08-22 04:33:08
【问题描述】：

我的导航栏中有一个表格，占用了大量空间。但是，输入的值是数字并且相对较小，因此输入框本身不需要和它们一样长。

如何缩小它们？

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand">Brand</a>
    </div>

    <form class="navbar-form navbar-left">
      <div class="form-group">
        <!-- How do I shrink these inputs? -->
        <input class="form-control" placeholder="0123456789" name="value1" type="text">
      </div>
      <div class="form-group">
        <input class="form-control" placeholder="0123456789" name="value2" type="text">
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
    </form>
  </div>
</nav>

http://www.bootply.com/5tTRuXDXwT

【问题讨论】：

好吧，您可以在这些输入上添加额外的类，然后只需减少 css 中的宽度/高度。

标签： twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

在 Bootstrap 中没有内置的方法来执行此操作。看看这个thread。

您始终可以自己定义 CSS 规则或更改 Bootstrap 类。这是您希望在 bootstrap.css/bootstrap.min.css 中更改的规则。此规则指定您的浏览器宽度超过 768 像素时的宽度。在此处更改它将使媒体规则在较小设备上的响应能力仍然有效。

@media(min-width: 768px){
    .navbar-form .form-control {
        display: inline-block;
        width: auto;    <---- Change this e.g. width: 100px;
        vertical-align: middle;
    }
}

【讨论】：