Question

这是我的页面，在PC上正常工作的bootstrap navbar。 http://web.ntnu.edu.tw/~60132057A/MyTalk.php

但不适合移动（如图）

mobile view 我几乎没有尝试解决这个问题，但是我不能在任何时候使导航栏适合PC和移动设备。

如何解决？

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

＆＃13;

<style> 
.div-left{margin:0 auto;text-align:left;width:540px;border:1px solid #FFF;} 
</style> 
<style scoped>
.container-fluid
{
  background-color: #78268c; 
  font-size: 20px;
  margin: 0 auto;
}

.navbar-header > a:link,
.navbar-header > a:visited,
.navbar .navbar-nav > li > a:link,
.navbar .navbar-nav > li > a:visited
{
  color: #D4D4D4;
}

.navbar-header > a:hover,
.navbar-header > a:focus,
.navbar .navbar-nav > li > a:hover,
.navbar .navbar-nav > li > a:focus
{
  color: #FFFFFF;
  background-color: #561b64; 
}
</style>

＆＃13;

    <!DOCTYPE html>
    <html>
    <body align="center">
    <br><!--不加上這個br的話，nav上面會有留白，但是原因不清楚-->
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">


    <nav class="navbar navbar-fixed-top">
        <!--chrome還不支援style scoped這個語法-->
        <div class="container-fluid">
            <ul class="nav navbar-nav">
                <li><a href="/~60132057A/">LKY's space</a></li>
                <li><a href="/~60132057A/">Home</a></li>
                <li><a href="/~60132057A/MyInfo.php">簡歷</a></li>
                <li><a href="/~60132057A/MyProject.php">作品</a></li>
                <li><a href="/~60132057A/MyCourse.php">課程</a></li>
                <li><a href="/~60132057A/MyTalk.php">嘴砲</a></li>
            </ul>
        </div>
    </nav>
    <h4>Fixed Navbar</h4>
    <br>
 </body>
</html>

＆＃13;

Answer 1

我想你的意思是导航栏在布局上溢出。如果是，请使用 navbar-fixed 类而不是 navbar-fixed-top 类（ <nav class="navbar navbar-fixed"> ）

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<style> 
.div-left{margin:0 auto;text-align:left;width:540px;border:1px solid #FFF;} 
</style> 
<style scoped>
.container-fluid
{
  background-color: #78268c; 
  font-size: 20px;
  margin: 0 auto;
}

.navbar-header > a:link,
.navbar-header > a:visited,
.navbar .navbar-nav > li > a:link,
.navbar .navbar-nav > li > a:visited
{
  color: #D4D4D4;
}

.navbar-header > a:hover,
.navbar-header > a:focus,
.navbar .navbar-nav > li > a:hover,
.navbar .navbar-nav > li > a:focus
{
  color: #FFFFFF;
  background-color: #561b64; 
}
</style>

    <!DOCTYPE html>
    <html>
    <body align="center">
    <br><!--不加上這個br的話，nav上面會有留白，但是原因不清楚-->
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">


    <nav class="navbar navbar-fixed">
        <!--chrome還不支援style scoped這個語法-->
        <div class="container-fluid">
            <ul class="nav navbar-nav">
                <li><a href="/~60132057A/">LKY's space</a></li>
                <li><a href="/~60132057A/">Home</a></li>
                <li><a href="/~60132057A/MyInfo.php">簡歷</a></li>
                <li><a href="/~60132057A/MyProject.php">作品</a></li>
                <li><a href="/~60132057A/MyCourse.php">課程</a></li>
                <li><a href="/~60132057A/MyTalk.php">嘴砲</a></li>
            </ul>
        </div>
    </nav>
    <h4>Fixed Navbar</h4>
    <br>
 </body>
</html>

Answer 2

您需要引导实现每个部分的类的对象

引导时，整个宽度的宽度为12列宽度，并且有一些类可以帮助您以最小的努力使对象和页面响应，查看此页面，阅读并耐心等待:)

 http://getbootstrap.com/css/

Answer 3

我自己解决，添加这个。但并不完美。

＆＃13;

.navbar-nav li{
            display: inline-block;
        }

＆＃13;

我的bootstrap导航栏无法适应移动设备

3 个答案: