0
我想創建一個使用Bootstrap的網格佈局，其中有一個左側，垂直導航欄佔用大型設備的視口的1/3，剩下的2/3分成兩列，包含面板。在移動設備上，我希望這些面板摺疊成一個列，垂直導航欄變成標準移動摺疊導航欄。另外，我希望站點頂部的徽標移動到左側，位於側面導航欄上方（下面的圖片說明了我希望它看起來如何的模型）。作爲3列布局的一部分的2列形式的自舉面板
在我已經設置了移動崩潰導航欄，很高興它是如何工作在縱向和橫向的時刻，但我不確定是什麼，我需要改變，使其轉變爲垂直，左導航欄對於md，lg和xl設備，以及徽標移動到左側。我試圖創建一個我爲移動設備創建的導航欄，並同時隱藏使用媒體查詢創建的原始導航欄。然後我將面板分成兩個獨立的行，並將它們的每個col值設置爲col-sm-12 col-md-4 col-lg-4 col-xl-4。我也嘗試使用浮動，但似乎也沒有工作。這裏是我的html：
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="index.html">home</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">home</a>
</li>
<li><a href="#about">about</a>
</li>
<li><a href="#blog">blog posts</a>
</li>
<li><a href="#submit">submit</a>
</li>
<li><a href="#events">events</a>
</li>
<li><a href="#mailing">mailing list</a>
</li>
<li><a href="#contact">contact</a>
</li>
<li><a href="http://uqsofa.bigcartel.com/">store</a>
</li>
</ul>
</div>
<!--/.collapse navbar-collapse -->
</div>
</nav>
<div class="container">
<div class="starter-template">
<div class="center-block">
<img src='img/sofa-logo.png' class="img-responsive center-block" alt="UQ SoFA logo">
</div>
<!-- /.center-block -->
<div class="row">
<div class="col-xs-0 col-sm-0 col-md-4 col-lg-4 col-xl-4">
<div class="navbar-collapse collapse sidebar-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">home</a>
</li>
<li><a href="#about">about</a>
</li>
<li><a href="#blog">blog posts</a>
</li>
<li><a href="#submit">submit</a>
</li>
<li><a href="#events">events</a>
</li>
<li><a href="#mailing">mailing list</a>
</li>
<li><a href="#contact">contact</a>
</li>
<li><a href="http://uqsofa.bigcartel.com/">store</a>
</li>
</ul>
</div>
<!--/.collapse navbar-collapse -->
</div>
<!-- /.col-xs-0 col-sm-0 col-md-3 col-lg-3 col-xl-3 -->
</div>
<!-- /.row-->
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
<div class="panel panel-default">
<div class="panel-body">SoFA at Market Day</div>
</div>
<!-- /.panel panel-default-->
<div class="panel panel-default">
<div class="panel-body">Cut Thumb ARI</div>
</div>
<!-- /.panel panel-default-->
</div>
<!-- /.col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4-->
</div>
<!-- /.row-->
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
<div class="panel panel-default">
<div class="panel-body">Interview with...</div>
</div>
<!-- /.panel panel-default-->
<div class="panel panel-default">
<div class="panel-body">Lecture by...</div>
</div>
<!-- /.panel panel-default-->
</div>
<!-- /.col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4-->
</div>
<!-- /.row-->
Here is a link to a codepen preview of my project.
我覺得好像我應該只使用一個導航欄，而不是媒體查詢隱藏原始。從本質上講，我堅持如何將這兩列面板定位到右側，並在左側具有導航欄和徽標，然後更改爲移動設備的標準摺疊導航欄和單列。任何關於如何讓這個佈局看起來像我的模型的幫助將不勝感激。
謝謝。
這個怎麼樣http://codepen.io/anon/pen/bqLQxg –
太感謝了，這真是棒極了！ – phsome