Bootstrap面板為2列結構，是3列布局的一部分

Question

我正在嘗試使用Bootstrap創建網格布局，該區域的左側是垂直導航欄，在大型設備上占據了視口的1/3，其余的2/3分為包含面板的兩列。 在移動設備上，我希望這些面板折疊成一列，而垂直導航欄變成標准的移動折疊導航欄。 此外，我希望網站頂部的徽標移動到左側導航欄上方的左側（下圖顯示了我希望它的外觀的模型）。

預期的布局

目前，我已經設置了移動折疊導航欄，並對它在縱向和橫向上的工作方式感到滿意，但是不確定我需要進行哪些更改，以使其轉換為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-->

這是我項目的Codepen預覽的鏈接。

我覺得我應該只使用一個導航欄，而不要使用媒體查詢來隱藏原始導航欄。 從本質上講，我對如何將這兩列面板放置在右側並在左側具有導航欄和徽標保持不變，然后將其更改為標准折疊式導航欄和一欄用於移動設備。 對於如何使這種布局看起來像我的模型的任何幫助，將不勝感激。

謝謝。

Answer 1

這個怎么樣

codepen

<div class="background">

        <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='http://i.imgur.com/UlAJQv9.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 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 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-->
            </div>
            <!-- /.starter-template-->

        </div>
        <!-- /.container -->

    </div>