ブートストラップを使用してグリッドレイアウトを作成しようとしています。左側には、大きなデバイスにビューポートの1/3を占める垂直ナビゲーションバーがあり、残りの2/3はパネルを含む2つの列に分割されます。モバイルデバイスでは、これらのパネルを1つの列に折りたたみ、垂直方向のナビゲーションバーを標準のモバイル折りたたみのナビゲーションバーに変えます。さらに、サイトの上部にあるロゴをサイドナビゲーションバーの上の左側に移動します（下の画像は、どのように見たいかのモックアップを示しています）。3列レイアウトの一部としての2列構成のブートストラップパネル
私は携帯崩壊のナビゲーションバーを設定し、それは肖像画や風景の中にどのように機能するかと幸せでいる瞬間が、私はそれが垂直、左のナビゲーションバーに変換を行うために変更する必要があるかわかりませんよmd、lg、xlデバイスの場合、ロゴを左に移動する場合に使用します。私は、モバイル用に作成したものの複製されたnavbarを作成しようとしました。同時に、メディアクエリを使用して作成したオリジナルを非表示にしました。次に、パネルを2つの別々の行に分割し、それぞれのcol値をcol-sm-12 col-md-4 col-lg-4 col-xl-4と設定します。私もフロートを使用しようとしましたが、どちらもうまくいかないようです。私は1つのナビゲーションバーではなく、元を隠すために、メディアクエリを使用してしなければならないかのように私は感じ
<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.
：ここに私のhtmlです。基本的には、これらの2列のパネルを右側に配置し、左側にナビゲーションバーとロゴを表示して、標準の折りたたみナビゲータとモバイルデバイス用の単一の列に変更する方法について悩んでいます。どのように私のモックアップのように見えるようにこのレイアウトを得ることができるかについてのどんな助けも大歓迎です。
ありがとうございました。
についてどのように素晴らしい仕事そんなにこのhttp://codepen.io/anon/pen/bqLQxg –
おかげで、およそ！ – phsome