Question

我是新手并且正在努力学习，但我被困在这里。我创建了以下页面，该页面应该具有内联形式来搜索用户。当我调整窗口大小时，它完全有效，除了窗口是全尺寸的时间。

当窗口是全尺寸时，我需要输入更宽，但我不能使它们比它们的默认大小更宽，尽管它们在窗口是完美的时会调整大小小尺寸（iPad /平板电脑和智能手机尺寸）

我遵循了这个description并将它们中的每一个包裹在一个单独的div中无济于事。

由于存在一些误解，请注意以下事项：

表格需要内联
当窗口为全尺寸时，两个搜索框应该更宽一些（其他窗口尺寸都很好）
请点击下面的演示链接，因为您可以看到小提琴打开时（在更改其大小之前），两个搜索框的宽度都很短，应该稍微扩展一下，以便有更多空间来键入值。

当我添加宽度：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。你一定可以试试。

这是小提琴：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中更改输入的宽度

1 个答案: