我的自举导航栏无法在移动平台上运行。如果我打开我的网站，我的导航栏会一直延伸到阻止我的网站内容。这是我的网站live demo。此外，我的网站导航栏颜色是黑色，但一旦我在手机中打开它变成灰色。甚至我的内容实际上并没有调整大小。我试着使用bootstrap网格。
继承引导网格的html代码：
<div class="container-fluid">
<ul class="sigs">
<li class="col-md-6 col-lg-2">
<button id="myPopOver" class="btn btn-default" data-toggle="popover" data-placement="right" title="Leader: Lim Teik Han" data-content="Scope & Objective: Appreciate the theory,
principle and application of internationally adopted business process improvement body of knowledge framework such as SCOR(Supply Chain Operation Reference),
CPFR(Collaborative Planning, Forecast, and Replenishment), BSC(Balanced Scorecard), Lean Six Sigma, TOC(Theory of Constraints), BABOK(Business Analysis Body of Knowledge).">Business Process</button>
</li>
<li class="col-md-6 col-lg-2">
<button id="myPopOver1" class="btn btn-default" data-toggle="popover" data-placement="right" title="Leader: Shamsul Anuar Abdul Wahid" data-content="Scope & Objective: Disseminate contemporary Enterprise Architecture(EA)
body of knowledge, such as TOGAF(The Open Group Architecture Framework), FEA(Federal Enterprise Architecture), ZIFA(Zachman Information Framework Architecture).">Architecture</button>
</li>
<li class="col-md-6 col-lg-2">
<button id="myPopOver2" class="btn btn-default" data-toggle="popover" data-placement="right" title="Leader: Wong Chow Jeng" data-content="Scope & Objective: Reinforce all kind of advanced ICT applied research that exhibits
high intent to go for commercialization and formulate strategies to monetizing research works.">Academics</button>
</li>
<li class="col-md-6 col-lg-2">
<button id="myPopOver3" class="btn btn-default" data-toggle="popover" data-placement="right" title="Leader: Kitt Lee" data-content="Scope & Objective: All contemporary programming languages, UML(Unified Modelling Language), UX(User Experience) and the-state-of-the-art software architectures.">Programming</button>
</li>
<li class="col-md-6 col-lg-2">
<button id="myPopOver4" class="btn btn-default" data-toggle="popover" data-placement="right" title="Leader: -TBA-" data-content="Scope & Objective: All kind of entertainment-oriented game development and competition.It includes film studio production.">Game & Simulation</button>
</li>
<li class="col-md-6 col-lg-2">
<button id="myPopOver5" class="btn btn-default" data-toggle="popover" data-placement="left" title="Leader: -TBA-" data-content="Scope & Objective: ">Social Media & Online Marketing</button>
</li>
<li class="col-md-6 col-lg-2">
<button id="myPopOver6" class="btn btn-default" data-toggle="popover" data-placement="right" title="Leader: Dr Lim Lian Tze" data-content="Scope & Objective: ">Data Science & Analytics</button>
</li>
<li class="col-md-6 col-lg-2">
<button id="myPopOver7" class="btn btn-default" data-toggle="popover" data-placement="right" title="Leader: Chen Woon Wee" data-content="Scope & Objective: ">Business Development</button>
</li>
<li class="col-md-6 col-lg-2">
<button id="myPopOver8" class="btn btn-default" data-toggle="popover" data-placement="right" title="Leader: -TBA-" data-content="Scope & Objective: ">Mobile App</button>
</li>
<li class="col-md-6 col-lg-2">
<button id="myPopOver9" class="btn btn-default" data-toggle="popover" data-placement="left" title="Leader: -TBA-" data-content="Scope & Objective: Disseminate contemporary technologies to develop and deploy Cloud Computing solutions.">Cloud Computing</button>
</li>
<li class="col-md-6 col-lg-2">
<button id="myPopOver10" class="btn btn-default" data-toggle="popover" data-placement="right" title="Leader: Chuah Pei Kern" data-content="Scope & Objective: Propel a comprehensive undestanding of equipment interface and embedded technology using Arduino as a demonstration toolset.">Arduino</button>
</li>
</ul>
</div>
<div class="container-fluid">
<ul>
<li class="col-xs-3 col-md-4">AGI-Goldratt Institute<br></li>
<li class="col-xs-3 col-md-4">Agile Institute <br></li>
<li class="col-xs-3 col-md-4">Chartered Institute of IT <br></li>
<li class="col-xs-3 col-md-4">FEAC Institute <br></li>
<li class="col-xs-3 col-md-4">MESA International <br></li>
<li class="col-xs-3 col-md-4">Institute of Business Forecasting and Planning <br></li>
<li class="col-xs-3 col-md-4">International Association for Contract and Commercial Management <br></li>
<li class="col-xs-3 col-md-4">International Institute of Business Analysis <br></li>
<li class="col-xs-3 col-md-4">Institute of Business Process Management <br></li>
<li class="col-xs-3 col-md-4">Supply Chain Council <br></li>
<li class="col-xs-3 col-md-4">The Open Group <br></li>
</ul>
</div>
答案 0 :(得分：1)
http://www.iconis.com.my/js/jquery-ui/smoothness/jquery-ui-1.8.1.custom.min.js 404 (Not Found)
http://www.iconis.com.my/js/jquery-qtip-1.0.0-rc3140944/jquery.qtip-1.0.js 404 (Not Found)
http://www.iconis.com.my/js/lib/jshashtable-2.1.js 404 (Not Found)
http://www.iconis.com.my/js/frontierCalendar/jquery-frontier-cal-1.3.2.min.js 404 (Not Found)
http://www.iconis.com.my/css/frontierCalendar/jquery-frontier-cal-1.3.2.css 404 (Not Found)
http://www.iconis.com.my/css/jquery-ui/smoothness/jquery-ui-1.8.1.custom.css 404 (Not Found)
http://www.iconis.com.my/img/coming_soon_ribbon.png 404 (Not Found)
检查您是否已将这些文件正确上传到您的主机，我的浏览器正在返回这些错误。
答案 1 :(得分：0)
您可以将导航栏压缩为小尺寸，然后使用下拉菜单。这有助于在手机上展示您的内容。
Bootstrap内置的类很少，可以帮助您实现这一目标。 在标题类中有一个按钮。
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
上述HTML会将菜单折叠为手机的切换按钮。
有另一个id为
的div<div class="collapse navbar-collapse" id="navbar-collapse-1">....
<!-- Menu items for mobile -->
</div>
您可以在此处找到文档 - Link