2017-09-25 207 views
-1

我从http://getbootstrap.com/版本4.0手动下载引导程序,但我不知道为什么我的导航,XS,面板类不工作,我在boostrap.min.css中搜索XS,但没有找到它。这是什么问题,但sm,md,lg类都工作正常。我不知道为什么有些类正在工作&为什么有些类不工作,我正式下载&样式表路径也是完美的,iam从过去3周修复是它任何解决方案。 这里是我的代码:为什么我的引导程序导航不起作用?

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Bootstrap Example</title> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-compatible" Content="IE-edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"> 

</head> 
<body> 


<div class="navbar navbar-default" role="navigation"> 

     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="fa fa-align-justify"></span> 
      </button> 
      <span class="navbar-brand">Diffie</span> 
     </div> 

     <div class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav"> 
       <li><a href="#">Link1</a></li> 
       <li><a href="#">Link2</a></li> 
       <li><a href="#">Link3</a></li> 
       <li><a href="#">Link4</a></li> 
       <li><a href="#">Link5</a></li> 
      </ul> 
     </div> 

    </div> 
<div class="container"> 



    <div class="row"> 
     <div class="col-sm-6"> 
      <p class="hidden-xs"><b>AAA Ipsum is simply dummy text of the printing</b> and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> 
     </div> 

     <div class="col-sm-6"> 
      <p>AAA Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> 
     </div>  
    </div> 

    <div class="row"> 
     <div class="col-sm-6 col-md-4 col-lg-3"> 
      <div style="width: auto;height: auto;background-color: gray;color: white;padding: 5px;margin-bottom: 10px;"> 
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> 
      </div> 
     </div> 

     <div class="col-sm-6 col-md-4 col-lg-3"> 
      <div style="width: auto;height: auto;background-color: gray;color: white;padding: 5px;margin-bottom: 10px;"> 
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> 
      </div> 
     </div> 

     <div class="col-sm-6 col-md-4 col-lg-3"> 
      <div style="width: auto;height: auto;background-color: gray;color: white;padding: 5px;margin-bottom: 10px;"> 
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> 
      </div> 
     </div> 

     <div class="col-sm-6 col-md-4 col-lg-3"> 
      <div style="width: auto;height: auto;background-color: gray;color: white;padding: 5px;margin-bottom: 10px;"> 
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> 
      </div> 
     </div> 

     <div class="col-sm-6 col-md-4 col-lg-3"> 
      <div style="width: auto;height: auto;background-color: gray;color: white;padding: 5px;margin-bottom: 10px;"> 
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> 
      </div> 
     </div> 

     <div class="col-sm-6 col-md-4 col-lg-3"> 
      <div style="width: auto;height: auto;background-color: gray;color: white;padding: 5px;margin-bottom: 10px;"> 
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> 
      </div> 
     </div> 

     <div class="col-sm-6 col-md-4 col-lg-3"> 
      <div style="width: auto;height: auto;background-color: gray;color: white;padding: 5px;margin-bottom: 10px;"> 
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> 
      </div> 
     </div> 

     <div class="col-sm-6 col-md-4 col-lg-3"> 
      <div style="width: auto;height: auto;background-color: gray;color: white;padding: 5px;margin-bottom: 10px;"> 
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> 
      </div> 
     </div> 


    </div> 
</div> 

</body> 
</html> 
+3

这有什么做用PHP。顺便说一句,你应该谷歌自举网格系统。你的网格根本不正确。据我所知,网格系统基于12点网格系统。你实际上是一排col-6的8倍。不知道引导程序如何支持这一点,它可以正确显示,但我不认为它的良好做法。 – Twinfriends

回答

0

引导程序4.0版不再使用-xs。只用col-2,或者其他什么应该给出相同的结果。

从引导网站:

...我们已经从我们的最低(超小型)断点扔下-xs缀。 xs不像sm,md,lg和xl那样是一个响应式断点,因为它不会以最小和最大宽度开始应用样式。它只适用于所有事物,因为没有绑定的@media查询。

0

我想你也忘了在标题一些书店:

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

相关问题