iT邦幫忙

0

手機上沒有navbar button

  • 分享至 

  • xImage

請教前輩我使用bootstrap把遊覽器變小我的header有 navbar 的 button 在手機上卻沒出現是甚麼原因該如何讓我的網頁在手機有button來下拉選巡覽列

我直接套bootstrap 以下是我套用bootstrap的html

<!DOCTYPE html>


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="css/style.css" rel="stylesheet" />
<!-- 掛載bootstrap樣式 開始 -->
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/bootstrap-theme.min.css" />
<script src="https://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- 掛載bootstrap樣式 結束 -->

<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<div class="row">

        <div class="col-lg-5">

</div></div>


<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

手機上
http://ithelp.ithome.com.tw/upload/images/20161020/20102789Qj5dCe4DA7.png

電腦上
http://ithelp.ithome.com.tw/upload/images/20161020/20102789kDeY6VIOlo.jpg

請參考這裡 https://kkbruce.tw/bs3/CSS#responsive-utilities
一般來說, nav bar 建議針對不同裝製作幾種不同的樣式
然後再針對裝置設定顯示不顯示的判斷
例如
<nav class=visible-xs-*>
超小螢幕才看得到
</div>
<nav class=visible-lg-*>
大螢幕才看得到
</div>
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
0
justin
iT邦新手 5 級 ‧ 2016-11-03 10:10:02
最佳解答

設定VIEWPORT看看

2
賽門
iT邦超人 1 級 ‧ 2016-10-21 16:36:06

Bootstrap是能根據螢幕尺寸自動調整NAV Bar的框架,拜Modern Wev所賜,你只要寫一套就能適用各種平台。
建議把這行:

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">

修改一點點看看有沒有改善

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">

即在class中的collapsed拿掉看看。
如果問題仍然存在,你的bootstrap.min.css和bootstrap-theme.min.css可能有被改變的地方,換成從官網上下載的版本試看看。

賽門 iT邦超人 1 級 ‧ 2016-10-21 16:42:36 檢舉

忘記圖...我用VS2015自動產生的專案來舉例:
http://ithelp.ithome.com.tw/upload/images/20161021/20017649qQ2WQsF4iV.png
你可以看到Nav bar正常運作:
http://ithelp.ithome.com.tw/upload/images/20161021/20017649y3mfYjwhac.png
VS2015裏的相關程式碼為:

<div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" runat="server" href="~/">Application name</a>
</div>
超超 iT邦新手 5 級 ‧ 2016-10-25 15:00:21 檢舉

我在電腦遊覽器縮小看的到但是在手機螢幕上還是沒button

賽門 iT邦超人 1 級 ‧ 2016-10-25 17:37:22 檢舉

Android手機?用Google Chrome瀏覽器來看,不要用手機廠給的瀏覽器。

0
Anny Cheng
iT邦新手 5 級 ‧ 2016-11-04 16:17:10

感覺應該是沒加viewport的關係
<meta name="viewport" content="width=device-width, initial-scale=1.0">

我要發表回答

立即登入回答