Question

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

如何缩小它们？

<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

Answer 1

在Bootstrap中没有内置方法可以做到这一点。看看这个thread。

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

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

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

1 个答案: