Bootstrap 面板以 2 列形式作为 3 列布局的一部分
Bootstrap panel in 2 column formation as part of a 3 column layout
我正在尝试使用 Bootstrap 创建网格布局，其中左侧垂直导航栏占据大型设备视口的 1/3，其余 2/3 分为包含面板的两列。在移动设备上，我希望这些面板折叠成一列，垂直导航栏变成标准的移动折叠导航栏。此外，我希望网站顶部的徽标向左移动，位于侧面导航栏上方（下图展示了我希望它看起来如何的模型）。
目前我已经设置了移动折叠导航栏并且很满意它在纵向和横向的工作方式，但我不确定我需要更改什么才能使其转换为 md、lg 的垂直左侧导航栏和 xl 设备，并使徽标向左移动。我试图创建一个我为移动设备制作的导航栏的副本，同时隐藏我使用媒体查询创建的原始导航栏。然后我将面板分成两行并将它们的每个列值设置为 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.
我觉得好像我应该只使用一个导航栏而不是媒体查询来隐藏原始导航栏。本质上，我对如何将这两列面板放置在右侧并在左侧放置导航栏和徽标感到困惑，然后更改为标准的折叠导航栏和移动设备的单列。任何有关如何使此布局看起来像我的模型的帮助将不胜感激。
谢谢。
这个怎么样
<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>
我正在尝试使用 Bootstrap 创建网格布局，其中左侧垂直导航栏占据大型设备视口的 1/3，其余 2/3 分为包含面板的两列。在移动设备上，我希望这些面板折叠成一列，垂直导航栏变成标准的移动折叠导航栏。此外，我希望网站顶部的徽标向左移动，位于侧面导航栏上方（下图展示了我希望它看起来如何的模型）。
目前我已经设置了移动折叠导航栏并且很满意它在纵向和横向的工作方式，但我不确定我需要更改什么才能使其转换为 md、lg 的垂直左侧导航栏和 xl 设备，并使徽标向左移动。我试图创建一个我为移动设备制作的导航栏的副本，同时隐藏我使用媒体查询创建的原始导航栏。然后我将面板分成两行并将它们的每个列值设置为 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.
我觉得好像我应该只使用一个导航栏而不是媒体查询来隐藏原始导航栏。本质上，我对如何将这两列面板放置在右侧并在左侧放置导航栏和徽标感到困惑，然后更改为标准的折叠导航栏和移动设备的单列。任何有关如何使此布局看起来像我的模型的帮助将不胜感激。
谢谢。
这个怎么样
<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>