css - div 未正确对齐

Question

我有一个 class = "row"的 div。在那个 div 中，我试图在同一行中对齐两个 div。但不知何故，它不起作用。

这是html代码

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class = "row">
    <div class = "col-md-8 col-sm-8 col-xs-8" style="width: 50%;" class="alert alert-danger" ng-if="offlineRouterCnt!=0">
      <strong>Number of offline Routers : {{offlineRouterCnt}} </strong>
    </div>

    <div class="input-group col-md-4 col-sm-4 col-xs-4" style = "width : 27%">
    <div class="input-group-btn">
      <button type="button" class="btn btn-primary" aria-haspopup="true" aria-expanded="false">ALL</button>
      </div>
    <input ng-model="naviagtion.searchText" class="form-control" focus-dir placeholder="Search Routers here"></input> 
      <span class="input-group-addon" ng-click="clearSearchAndFilters();">
        <span class="fa fa-times fa-1x"></span>
      </span>
    </div>
  </div>

有人可以帮我如何将它们对齐在同一行吗？

Answer 1

为什么要指定 col-md-4、col-sm-4 和 col-xs-4。 Bootstrap 缩放，因此您只需要输入 col-xs-4 和 col-xs-8。

我认为浏览器对声明和堆叠它们而不是缩放感到困惑。