Question

我试图将滤镜盒对齐成每行跨越3个块的网格......

我不想失去引导程序的外观，所以我还没有尝试去除其中一些导航栏/输入组类。有没有一个干净的方法来解决这个问题？我将来采取什么方法来解决这类问题呢？ jsFiddle在下面

<nav class="navbar navbar-default" ng-if="filterOn">
<form class="navbar-form"> <span class="input-group col-sm-4"> <span class="input-group-addon">Filter: </span>

    <input class="form-control" ng-model="filterOptions.filterText" />
    </span> <span class="input-group col-sm-4"> <span class="input-group-addon" style="width: 20%">Filter A: </span>

    <select class="form-control" name="mySelect1" ng-model="sel1">
        <option></option>
        <option>{{selections}}</option>
    </select>
    </span> <span class="input-group col-sm-4"> <span class="input-group-addon">Filter B: </span>

    <select class="form-control" name="mySelect2" ng-model="nameVarTo">
        <option></option>
        <option>selections2</option>
    </select>
    </span>
</form>

http://jsfiddle.net/u1wffrd4/1/

Answer 1

试试这个：

.input-group {
    width:100%;
}

<div class="table-responsive">
    <nav class="navbar navbar-default" ng-if="filterOn">
        <form class="navbar-form">
            <div class="col-sm-4 col-xs-12">
            <span class="input-group"> 
                <span class="input-group-addon"  style="width: 20%">Filter: </span>
                <input class="form-control" ng-model="filterOptions.filterText" />
            </span>
            </div>
            <div class="col-sm-4 col-xs-12">
            <span class="input-group"> <span class="input-group-addon" style="width: 20%">Filter A: </span>
                <select class="form-control" name="mySelect1" ng-model="sel1">
                    <option></option>
                    <option>{{selections}}</option>
                </select>
            </span>
            </div>
            <div class="col-sm-4 col-xs-12">
            <span class="input-group"> <span class="input-group-addon"  style="width: 20%">Filter B: </span>

                <select class="form-control" name="mySelect2" ng-model="nameVarTo">
                    <option></option>
                    <option>selections2</option>
                </select>
            </span>
            </div>
        </form>
    </nav>
</div>

Answer 2



   

     .input-group.col-xs-4.col-md-4 {
        float: left;
        padding: 5px;
    }
   <div class="table-responsive">
    <nav ng-if="filterOn" class="navbar navbar-default">
        <form class="navbar-form">
 <div class="show-grid">
            <span class="input-group col-xs-4 col-md-4"> <span class="input-group-addon">Filter: </span>

                <input ng-model="filterOptions.filterText" class="form-control">
            </span>
            <span class="input-group col-xs-4 col-md-4"> <span class="input-group-addon" style="width: 20%">Filter A: </span>

                <select class="form-control" name="mySelect1" ng-model="sel1">
                    <option></option>
                    <option>{{selections}}</option>
                </select>
            </span>
            <span class="input-group col-xs-4 col-md-4"> <span class="input-group-addon">Filter B: </span>

                <select class="form-control" name="mySelect2" ng-model="nameVarTo">
                    <option></option>
                    <option>selections2</option>
                </select>
            </span>
  </div>
        </form>
    </nav>
</div>

Answer 3

您必须使用.container或.container-fluid和.row类包装代码。请检查此http://jsfiddle.net/manishrane1/u1wffrd4/2/

<div class="container">
<div class="row">
    <div class="table-responsive">
    <nav class="navbar navbar-default" ng-if="filterOn">
        <form class="navbar-form">
            <div class="col-xs-4"><span class="input-group"> <span class="input-group-addon">Filter: </span>

                <input class="form-control" ng-model="filterOptions.filterText" />
            </span></div>
            <div class="col-xs-4"><span class="input-group"> <span class="input-group-addon" style="width: 20%">Filter A: </span>

                <select class="form-control" name="mySelect1" ng-model="sel1">
                    <option></option>
                    <option>{{selections}}</option>
                </select>
            </span></div>
            <div class="col-xs-4"><span class="input-group"> <span class="input-group-addon">Filter B: </span>

                <select class="form-control" name="mySelect2" ng-model="nameVarTo">
                    <option></option>
                    <option>selections2</option>
                </select>
            </span></div>
        </form>
    </nav>
        </div>
</div>
</div>

HTML引导网格列未对齐

3 个答案: