Question

<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <form class="form-inline" role="form">

                <div style="display:inline-block;" class="dropdown">
                    <button class="btn btn-default dropdown-toggle" type="button" name="city" data-toggle="dropdown">CITY
                    <span class="caret"></span></button>
                    <ul class="dropdown-menu">
                      <li><a href="#">DELHI</a></li>
                      <li><a href="#">MUMBAI</a></li>
                      <li><a href="#">CHENNAI</a></li>
                      <li><a href="#">KOLKATA</a></li>
                    </ul>
                </div>
                <input type="text" class="form-control" id="search" name="search" placeholder="Search"/>
                <button class="btn btn-warning" id="serach_button"style="background-color:yellow !important;border-color:yellow !important; color:black !important;">Search</button>
            </div>  
        </form> 
    </div>

Answer 1

这可能会有所帮助

如果您只想要移动/平板电脑模式。请移除col-md-12 col-lg-12

<强> HTML

<div class="row">
  <div class="col-md-12 col-lg-12 col-sm-12 col-xs-12">
    <div class="input-group">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">CITY<span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><a href="#">DELHI</a></li>
          <li><a href="#">MUMBAI</a></li>
          <li><a href="#">CHENNAI</a></li>
          <li><a href="#">KOLKATA</a></li>    
        </ul>
      </div>          
      <input type="text" class="form-control" aria-label="...">
      <span class="input-group-btn">
    <button class="btn btn-default" type="button">Search!</button>
  </span>
    </div>
  </div>
</div>

Working demo

想要在一行中修复所有下拉列表，文本字段和按钮（移动/平板电脑模式）

1 个答案: