Javascript 使用引导CSS，我想显示正确的移动视图_Javascript_Jquery_Html_Css_Twitter Bootstrap

Javascript 使用引导CSS，我想显示正确的移动视图

javascript jquery html css twitter-bootstrap

Javascript 使用引导CSS，我想显示正确的移动视图,javascript,jquery,html,css,twitter-bootstrap,Javascript,Jquery,Html,Css,Twitter Bootstrap,我希望我的网站是移动响应，并希望移动视图有这种变化。我想说的是，添加cd-xs-12不会做出任何更改，甚至cd-sm-12也不能满足我的需求这是我现有的代码 .mobile选择{高度：50px；顶部填充：15px；左侧填充：60px；右侧填充：20px} 屏幕分析 | 只需添加clearfixes，伙计。大概是这样的： <div class=clearfix></div> .clearfix { clear: both; } 在你的头标签里，放上这些线还要

我希望我的网站是移动响应，并希望移动视图有这种变化。我想说的是，添加cd-xs-12不会做出任何更改，甚至cd-sm-12也不能满足我的需求

这是我现有的代码

.mobile选择{高度：50px；顶部填充：15px；左侧填充：60px；右侧填充：20px} 屏幕分析 |

只需添加clearfixes，伙计。大概是这样的：

<div class=clearfix></div>

.clearfix {
clear: both;
}

在你的头标签里，放上这些线

还要重新检查div标签，确保元素放置正确。

看看这是否有帮助！添加了col-xs-12以正确渲染元素的高度。*将是代码中用于检查修改的标识符

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>

    <style >

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


    <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 **class="breadcrumb"**>
          <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 **col-xs-12**">
        <ul class="device-menu bg-white **col-xs-12**">
          <li class="selected **col-xs-12**">
            <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 **class="col-xs-12"**>
            <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 **col-xs-12**">
        <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>

<!-- end snippet -->




</html>

这没有多大帮助-它使日历看起来很好，但上半部分仍然是一样的。你是否尝试在你的ios链接后添加相同的div？是的，我尝试过。除了下一行的iOs图标外，它不做任何更改。这样，它会将桌面视图更改为此，这是不需要的。请尝试通过@media添加边距。请共享完整代码。它没有你的css。@TanviChaturvedi更新了它-没有影响也不能解决它，相反，我发现了另一个黑客，我在需要的地方添加了它，它很神奇。谢谢你的帮助。