无法在面板内的form-inline内对齐form-group线

Question

以下代码描述了我的一个网页中的面板：

  <div class="row" id="tool_row">
<div class="panel panel-info" id="edit_toolbar" style="width:66%">

  <div class="panel-heading">
    <h1 class="panel-title"><b>Herramientas</b></h1>
  </div>

  <div class="panel-body">      
    <div class="form-inline" style="width:100%">          
      <button class="btn btn-primary" onclick="loadActForEdition(-1)">Nueva actividad</button>  

      <p style="margin-top:10px"><label class="control-label"> Opciones de Filtrado </label></p>

      <label class="control-label"> Últimos </label> <input class="form-control" id="ndays" style="width:5%" onkeypress='getEnter(event,"fillTaskTable")'> <label class="control-label" style="margin-right:10px"> días </label>

      <select data-placeholder="Filtrar por proyecto" class="chosen" id="proyect_box" onchange=fillTaskTable()></select>
      <select data-placeholder="Filtrar por estado" class="chosen" id="status_box" onchange=fillTaskTable()> </select>                

      <div class="form-group pull-right">
    <label class="control-label"> Número de resultados </label> <input class="form-control" id="nrows" style="width:15%" value=30 onkeypress='getEnter(event,"fillTaskTable")'>
      </div>

    </div> <!--form_inline-->               
  </div> <!--Panel body-->

</div>  <!--del panel-->

然而，它没有按预期工作，因为在该表格组和面板右侧之间存在令人讨厌的空间，我一直试图消除这种情况，但我无法做到这一点。

我想要做的只是消除那个空白。我希望标签和文本框作为一个组在面板中正确对齐。

谁能告诉我我做错了什么？

Answer 1

form-group位于右侧，但宽度较大，因此如果它已向右移动，则无法确定。将内容对齐到右侧或使form-group的宽度变小。

HTML

 <div class="form-group pull-right newclass">
  <label class="control-label"> Número de resultados </label> <input class="form-control" id="nrows" style="width:15%" value=30 onkeypress='getEnter(event,"fillTaskTable")'>
 </div>

CSS

 .newclass { text-align: right; }

Answer 2

我看不到为form-group / pull-right div提供的宽度。可能它比它的内容大。设置div到右边的文本对齐应该可以解决问题。

干杯。

Answer 3

制作两个容器div，让它们左右拉动，giv text-right 拉动右侧

<div class="form-group pull-right text-right" style="padding:0;margin:0;">
</div>

<div class="form-group pull-right text-right" style="padding:0;margin:0;">
</div>

这是片段

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<<div class="row" id="tool_row">
    <div class="panel panel-info" id="edit_toolbar" style="width:66%">
        <div class="panel-heading">
             <h1 class="panel-title"><b>Herramientas</b></h1>

        </div>
        <div class="panel-body">
            <div class="form-inline">
                <button class="btn btn-primary" onclick="loadTaskForEdition(-1)">Nueva Tarea</button>
                <button class="btn btn-primary" onclick="loadActForEdition(-1)">Nueva actividad</button>
                <p style="margin-top:10px">
                    <label class="control-label">Opciones de Filtrado</label>
                </p>
                <div class="pull-left" style="" apdding:0;margin:0; ">
      <label class="control-label "> Últimos </label> <input class="form-control " id="ndays " style="width:5% " onkeypress='getEnter(event,"fillTaskTable ")'> <label class="control-label " style="margin-right:10px "> días </label>       

     <select data-placeholder="Filtrar por usuario " class="chosen " id="username_box " onchange=fillTaskTable()> </select>
</div>
      <div class="form-group pull-right text-right" style="padding:0;margin:0;">
    <label class="control-label "> Número de resultados </label> <input class="form-control " id="nrows " style="width:15% " value=30 onkeypress='getEnter(event,"fillTaskTable ")'>
      </div>

    </div> <!--form_inline-->               
  </div> <!--Panel body-->

</div>  <!--del panel-->