Question

我需要在一行中使用以下控件并向右对齐。我需要在右下角的文本框中显示两个图标。并且两个控件都要正确对齐。

 <div class="col-md-12">
                    <div class="col-md-6">
                        <input type="text" id="txtDateRange"
                               class="form-control input-md" name="txtDateRange"
                               placeholder="Select Range"
                               ng-model="Model.RageDates" />
                        <span><i class="glyphicon glyphicon-remove" ></i></span>

                        <span class="form-control-feedback"><i class="glyphicon glyphicon-calendar fa fa-calendar"></i></span>

                    </div>

                    <div class="col-md-6" style="float: right;">
                        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <span>{{ selectedItem ? selectedItem.Label : 'ALL LOCATIONS' }}</span>
                            <span class="caret"></span>
                        </button>

                        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                            <li ng-repeat="Label in Summary.Locations">
                                <a ng-click="dropboxitemselected(Label)">
                                    {{Label.Label}}
                                </a>
                            </li>
                        </ul>
                    </div>

                </div>

Answer 1

你可以这样做：

＆＃13;

.col-md-6{
  float: right;
}

.wrapper{
  overflow: hidden;
}

#txtDateRange{
  width: 100%;
}

＆＃13;

<div class="col-md-12">
  <div class="col-md-6">
     <span><i class="glyphicon glyphicon-remove" ></i></span>
     <span class="form-control-feedback"><i class="glyphicon glyphicon-calendar fa fa-calendar"></i></span>
  </div>
  <div class="wrapper">
     <input type="text" id="txtDateRange"
                     class="form-control input-md" name="txtDateRange"
                     placeholder="Select Range"
                     ng-model="Model.RageDates" />
  </div>
</div>

＆＃13;

Answer 2

Bootstrap样式.form-control输入元素为BLOCK（它们通常是内联的）。

如果您将该特定输入元素重新设置为inline-block并稍微减小宽度（不确定为什么这是必要的 - 可能仅适用于SO片段环境），您将能够使用在span元素上margin-left将它们稍微过了一点。

＆＃13;

span.a1{margin-left:-50px;border:1px solid green;}
span.a2{border:1px solid red;}

#txtDateRange{display:inline-block;width:99.3%;}
div.a1 {display:inline-block;margin-left:-50px;border:1px solid green;}
div.a2 {display:inline-block;                  border:1px solid red;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<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>
<p>&nbsp;</p>
<div class="col-md-12">
  <div class="col-md-6">
    <input type="text" id="txtDateRange"
           class="form-control input-md" name="txtDateRange"
           placeholder="Select Range"
           ng-model="Model.RageDates" />
    <span class="a1"><i class="glyphicon glyphicon-remove" ></i></span>
    <span class="a2 xform-control-feedback"><i class="glyphicon glyphicon-calendar xfa xfa-calendar"></i></span>

  </div>

  <div class="col-md-6" style="float: right;">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span>{{ selectedItem ? selectedItem.Label : 'ALL LOCATIONS' }}</span>
      <span class="caret"></span>
    </button>

    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
      <li ng-repeat="Label in Summary.Locations">
        <a ng-click="dropboxitemselected(Label)">
          {{Label.Label}}
        </a>
      </li>
    </ul>
  </div>

</div>

＆＃13;

在文本框中显示图标

2 个答案: