html - 使用分页导航在同一行搜索元素

Question

请问如何使页面左侧的以下搜索栏及其按钮和右侧的分页位于同一行？

这是我正在处理的模板:http://jsfiddle.net/ht97t/1/

<form role="search" method="get" action="/Accueil/Rechercher">
    <div class="col-xs-8">
        <input type="text" name="rech" class="form-control" placeholder="Rechercher">
    </div>
    <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button><br />
    <label style="margin-left:20px;"><input type="radio" name="type" value="nomPoste" /> Nom du poste de travail</label><label style="margin-left:12px;"><input type="radio" name="type" value="nomAppMetier" checked /> Nom de l'application métier</label>
</form>
<ul class="pagination pagination-sm" style="float:right;">
        <li class="disabled"><a href="#">&laquo;</a></li>
        <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
        <li><a href="#">2 </a></li>
        <li><a href="#">3 </a></li>
        <li><a href="#">4 </a></li>
        <li><a href="#">5 </a></li>
        <li><a href="#">&raquo;</a></li>
</ul>

我已经试过了，但是没有用:http://jsfiddle.net/ht97t/2/

注意:我正在使用 Bootstrap 。

非常感谢!

Answer 1

来自 bootstrap CSS；

.pagination {
    border-radius: 4px;
    display: inline-block;
    margin: 20px 0;
    padding-left: 0;
}

您需要覆盖该边距，现在只需在您的 UL 上设置内联样式即可确认；

<ul class="pagination pagination-sm" style="float:right; margin: 0!important;">

编辑

您应该按照记录 (http://getbootstrap.com/css/) 使用 Bootstrap 网格，即定义一行，然后通过设置 div 类指定内容在该行中的位置。

例如，如果你想在左上方有一个搜索框，在一行的右上方有一个分页控件，那么试试这个:

<div class="row">
  <div class="col-xs-8"><!--search here --></div>
  <div class="col-xs-4"><!--pagination here --></div>
</div>

如果你想在左右内容之间留一些空间，那么使用偏移类:

<div class="row">
  <div class="col-xs-6"><!--search here --></div>
  <div class="col-xs-4 col-xs-offset-2"><!--pagination here --></div>
</div>

在您的原始示例中，您有一个左侧的搜索框、中间的单选按钮和右侧的分页按钮，因此您最好使用 4 4 4 网格:

<div class="row">
  <div class="col-xs-4"><!--search here --></div>
  <div class="col-xs-4"><!--radio buttons here --></div>
  <div class="col-xs-4"><!--pagination here --></div>
</div>