javascript - 使用 Bootstrap CSS 我想显示正确的移动 View

Question

我希望我的网站具有移动响应能力，并希望移动 View 具有这种变化。我想提一下添加 cd-xs-12不做任何改变甚至cd-sm-12没有得到我想要的东西。

这是我现有的代码

.mobile-select {height:50px;padding-top:15px;padding-left:60px;padding-right:20px}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="row breadcrumb bg-white border-bottom paddl30">
  <div class="col-md-6">
    <ul>
      <li><a href="">Devices</a></li>
      <li> &gt; </li>
      <li>Screen Analytics</li>
    </ul>
  </div>
</div>
<div class="row mobile-select border-bottom">
  <div class="col-md-6">
    <ul class="device-menu bg-white">
      <li class="selected">
        <a href="javascript:void(0)" id="mobileAppScreens">Mobile</a>
        <span class="sub-menu-menu"> 
									<i class="fa fa-chevron-right" aria-hidden="true"></i>
									<a href="javascript:void(0)" ng-click="" id="iosMobileAppScreens" class="checked"> <i class="fa fa-apple" aria-hidden="true" ></i> ios</a>

									<a href="javascript:void(0)" ng-click="" id="androidMobileAppScreens"><i class="fa fa-android" aria-hidden="true"></i> Android</a>
								</span>
        <span class="grey-pipe">|</span>
      </li>
      <li>
        <a href="javascript:void(0)" id="tabletAppScreens">Tablet</a>
        <span class="sub-menu-menu hide"> 
									<i class="fa fa-chevron-right" aria-hidden="true"></i>
									<a href="javascript:void(0)" ng-click="" id="iostabletAppScreens"><i class="fa fa-apple" aria-hidden="true"></i> ios</a>

								<a href="javascript:void(0)" ng-click=""  id="androidtabletAppScreens"> <i class="fa fa-android" aria-hidden="true"></i> Android</a>
								</span>
      </li>
      <li class="hidden">
        <input type="text" id="selMenu" value="iosMobileAppScreens">
        <input type="text" id="sDate">
        <input type="text" id="eDate">
      </li>
    </ul>

  </div>
  <div class="col-md-6">
    <div id="dateRangescreenAnalytics" class="pull-right">
      <i class="glyphicon glyphicon-calendar txt-green fa fa-calendar"></i>
      <span></span><b class="caret"></b>
    </div>
  </div>
</div>

解决方案——添加<br class="visible-xs">在任何需要的地方。

Answer 1

只需添加 clearfixes，伙计。像这样:

<div class=clearfix></div>

在样式中应该是这样的:

.clearfix {
clear: both;
}