列表内联中的搜索框(Search box within list-inline)
我有以下页面:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <body> <div class="container"> <div class="page-header"> <h3>CAMPAIGNS</h3> <!--<button class="btn btn-danger pull-right">Button</button>--> </div> <ul class="list-inline"> <li> <p>Sort By</p> </li> <li class="dropdown"> <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> Date <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">Date</a></li> </ul> </li> <li> <div class="input-group col-xs-4 pull-right"> <span class="input-group-btn"> <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"></span></button> </span> <input type="text" class="form-control" placeholder="Search"> </div> </li> </ul> </div> </body>
https://jsfiddle.net/aze5uh2h/
当您打开页面时,您会看到搜索框位于“按日期排序”下方。 我怎样才能让它在同一条线上?
I have the following page:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <body> <div class="container"> <div class="page-header"> <h3>CAMPAIGNS</h3> <!--<button class="btn btn-danger pull-right">Button</button>--> </div> <ul class="list-inline"> <li> <p>Sort By</p> </li> <li class="dropdown"> <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> Date <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">Date</a></li> </ul> </li> <li> <div class="input-group col-xs-4 pull-right"> <span class="input-group-btn"> <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"></span></button> </span> <input type="text" class="form-control" placeholder="Search"> </div> </li> </ul> </div> </body>
https://jsfiddle.net/aze5uh2h/
When you open the page, you see that the search box is below the Sort By Date. How can I get it to be on the same line?
原文:https://stackoverflow.com/questions/37058234
更新时间:2023-06-30 07:06