如何隱藏引導程序3中的元素的一部分？

Question

我使用的是從W3學校側邊欄例子，請檢查出來：

Slid_show_link

的問題是，我想調整它一點點，所以當這個頁面被打開一個iphone 6，側面導航欄將只顯示圖標，請參閱我的代碼：

function openNav() { 
 
    document.getElementById("mySidenav").style.width = "250px"; 
 
    document.getElementById("main").style.marginLeft = "250px"; 
 
} 
 

 
function closeNav() { 
 
    document.getElementById("mySidenav").style.width = "0"; 
 
    document.getElementById("main").style.marginLeft= "0"; 
 
}

body { 
 
    font-family: "Lato", sans-serif; 
 
} 
 

 
.sidenav { 
 
    height: 100%; 
 
    width: 0; 
 
    position: fixed; 
 
    z-index: 1; 
 
    top: 0; 
 
    left: 0; 
 
    background-color: #111; 
 
    overflow-x: hidden; 
 
    transition: 0.5s; 
 
    padding-top: 60px; 
 
} 
 

 
.sidenav a { 
 
    padding: 8px 8px 8px 32px; 
 
    text-decoration: none; 
 
    font-size: 25px; 
 
    color: #818181; 
 
    display: block; 
 
    transition: 0.3s 
 
} 
 

 
.sidenav a:hover, .offcanvas a:focus{ 
 
    color: #f1f1f1; 
 
} 
 

 
.sidenav .closebtn { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 25px; 
 
    font-size: 36px; 
 
    margin-left: 50px; 
 
} 
 

 
#main { 
 
    transition: margin-left .5s; 
 
    padding: 16px; 
 
} 
 
.col-sm-2 { 
 
    padding-left:0px; 
 
    padding-right:0px; 
 
} 
 

 
<!-- begin snippet: js hide: false console: true babel: false -->

<!-- Font awesome --> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css"> 
 

 
<!-- jquery --> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
 

 
<!-- jquery ui --> 
 
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
 
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
 

 
<!-- bootstrap --> 
 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"> 
 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 

 

 
<div class="row"> 
 
    <div id="mySidenav" class="sidenav col-sm-2" style="background-color:yellow;"> 
 
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> 
 
     <a href="#main"><i class="fa fa-user" aria-hidden="true"></i> <span class="hidden-sm">About</span></a> 
 
     <a href="#"><i class="fa fa-file-o" aria-hidden="true"></i> <span class="hidden-sm">Service</span></a> 
 
     <a href="#"><i class="fa fa-sign-in" aria-hidden="true"></i> <span class="hidden-sm">Client</span></a> 
 
     <a href="#"><i class="fa fa-star" aria-hidden="true"></i> <span class="hidden-sm">Contact</span></a> 
 
    </div> 
 

 
    <div id="main" class="col-sm-10" style="background-color:pink;"> 
 
    <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span> 
 
    <table class="table table-hover table-responsive" id="by_state_table"> 
 
     <thead> 
 
      <tr> 
 
      <th>col1</th><th>col2</th><th>col3</th><th>col4</th><th>col5</th><th>col6</th> 
 
      </tr> 
 
     </thead> 
 
     <tbody> 
 
      <tr> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      <td>test</td> 
 
      </tr> 
 
     </tbody> 
 
     </table> 
 
    </div> 
 
</div>

我是新來引導3，我設法隱藏這些短語在iphone 6上的邊欄中，並設法在此頁面上創建網格系統。 我想實現的是：

（1）僅顯示iphone6上的圖標，並使側欄縮小爲圖標的大小。

（2）僅在iphone6上顯示錶格的3列。

任何幫助表示讚賞！提前謝謝你！

EDIT________________________________________________

我曾嘗試爲@jogoe建議，請在行動中看到我的代碼編輯我的代碼： https://plnkr.co/edit/5ieutCzHQT87if65ZY5f?p=preview

的OPEN應該在小屏幕上隱藏的一個，它不工作。

Answer 1

（1）僅顯示iphone6上的圖標，並使側欄縮小到圖標的大小。

你可以給你的桌面側邊欄類：hidden-xs和創建新的側邊欄，並給它的類如：visible-xs-1

這將導致你的桌面側邊欄被隱藏，移動，側邊欄（你只是把你的圖標，並設置它的樣子，你希望它看起來在手機）正在顯示。

可以對here.

讀了（2）只看上iphone6表3周的cols。

您應該可以通過再次添加引導類來做到這一點。例如： -

<th class="col-md-2 col-xs-4">col1</th> 

檢查了這一點here.