无法更改 bootstrap-3 中的输入宽度

Question

我是新手，正在努力学习，但我被困在这里。我创建了以下页面，该页面应该有一个 在线表格 来搜索用户。当我调整 window 大小时它完美地工作，除了 window 是全尺寸的时间。

当 window 为全尺寸时，我需要输入更宽一些 ，但我无法使它们比默认尺寸更宽，尽管当 window 为小尺寸（iPad / 平板电脑和智能 phone 尺寸时它们可以完美调整大小）

我按照这个 description 将它们分别包装在一个单独的 div 中，但无济于事。

如有误会请注意以下：

表格需要内联
当 window 为全尺寸时，两个搜索框都应该更宽一些（其他 window 尺寸都可以）
请点击下面的演示 link，您可以看到当 fiddle 打开时（在更改其大小之前）两个搜索框的宽度都很短，应该稍微扩展到有更多 space 来输入值。

当我添加宽度时：96%；对于要测试的输入，它们的宽度变化不大。我对这个问题很困惑。

   <div class="container-fluid">
    <div class="row" style="background-color: green;">
        <div class="col-md-3">
            <div id="logo" style="margin-right: 0px; float: right;">
                <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_FCNfsR_UhKGdOTtUKK8XfQXKnlgw5Q0jaBbdiCSBTnCoaGgqIA" width="40px" height="40px" />
            </div>
        </div>
        <div class="col-md-6">
            <div id="banner">
                <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR-32Ge8DaAq_81IBLPFdRWmKVYgvN9YyDKKjXh6CTTpgey8qbC" height="40px;" width="300px;" />
            </div>
               <form class="form-inline" role="form">
        <div class="form-group">
            <label class="sr-only" for="inputEmail">Email</label>
            <input type="email" class="form-control" id="inputEmail" placeholder="Email">
        </div>
        <div class="form-group">
            <label class="sr-only" for="inputPassword">Password</label>
            <input type="password" class="form-control" id="inputPassword" placeholder="Password">
        </div>
        <button type="submit" class="btn btn-primary">Search</button>
    </form>
        </div>
        <div class="col-md-3">
            <div id="images" style="float: left;">
                <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_FCNfsR_UhKGdOTtUKK8XfQXKnlgw5Q0jaBbdiCSBTnCoaGgqIA" width="20px" height="20px" />
                <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_FCNfsR_UhKGdOTtUKK8XfQXKnlgw5Q0jaBbdiCSBTnCoaGgqIA" width="20px" height="20px" />
                <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_FCNfsR_UhKGdOTtUKK8XfQXKnlgw5Q0jaBbdiCSBTnCoaGgqIA" width="20px" height="20px" />
                <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_FCNfsR_UhKGdOTtUKK8XfQXKnlgw5Q0jaBbdiCSBTnCoaGgqIA" width="20px" height="20px" />
            </div>
        </div>
        <div class="container">..</div>

Answer 1

我刚刚在这里使用了我之前项目中的一些随机 html。你一定可以试试。

这是 fiddle : https://jsfiddle.net/2hcnydwf/6/

这是 HTML：

<div class="container">
              <div class="row">
                <div class=" col-md-12 col-sm-12 col-xs-12 search-container">
                  <div class="col-md-3 col-sm-6 col-xs-6 searchbox">
                    <input class="form-control searchinput" type="text" placeholder="Area">
                  </div>
                  <div class="col-md-3 col-sm-6 col-xs-6">
                    <select class="form-control searchinput">
                      <option>1</option>
                      <option>2</option>
                      <option>3</option>
                      <option>4</option>
                      <option>5</option>
                    </select>
                  </div>
                  <div class="col-md-3 col-sm-6 col-xs-6">
                    <select class="form-control searchinput">
                      <option>1</option>
                      <option>2</option>
                      <option>3</option>
                      <option>4</option>
                      <option>5</option>
                    </select>
                  </div>
                  <div class="col-md-3 col-sm-6 col-xs-6">
                    <button href="#" class="btn-search">Search</button>
                  </div>
                </div>
              </div>
            </div>

这是 CSS :

.searchinput{height: 40px;border:#fff 1px solid;box-shadow: none;}

无法更改 bootstrap-3 中的输入宽度

Cannot change width of input in bootstrap-3

css

twitter-bootstrap

twitter-bootstrap-3