div没有正确对齐

Question

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

这里是html代码

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

Answer 1

为什么要指定col-md-4，col-sm-4和col-xs-4。 Bootstrap秤，所以你只需要输入col-xs-4＆amp; COL-XS-8。

我认为浏览器对于宣布哪一个并将其堆叠而不是缩放而感到困惑。

Answer 2

您的代码正在使用Firefox 10.3（macOS High Sierra）。但我想有些浏览器可能会与您的自定义内联width样式发生冲突。尝试删除它。浮动元素的宽度是从bootstrap类设置的。

所以最终的代码可能是：

    <div class = "row">
     <div class = "col-md-8 col-sm-8 col-xs-8" 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">
      <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>