我正在用顶部固定的导航栏做一个响应性的布局.下面有两列,一个用于侧栏(3),另一个用于内容(9).桌面上的哪一个看起来像这样

navbar
[3][9]

当I resize移动到navbar时,会压缩并隐藏侧边栏,然后将其堆叠在内容顶部,如下所示:

navbar
[3]
[9]

我想把主要内容放在最上面,所以我需要把手机上的顺序改成这样:

navbar
[9]
[3]

我找到了this article个包含相同点的答案,但被接受的答案已被编辑,表示解决方案no适用于当前版本的Bootstrap.

如何在mobile上重新排列这些列?或者,如何将sidbar列表组放入扩展的navbar中?

以下是我的代码:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="navbar navbar-inverse navbar-static-top">
  <div class="container">
    <a href="#" class="navbar-brand">Brand Title</a>
    <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <div class="collapse navbar-collapse navHeaderCollapse">

    <ul class="nav navbar-nav navbar-right"><!--original navbar-->
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">FAQ</a></li>
    </ul>

    </div>
  </div>
</div><!--End Navbar Div-->
    <div class="container">
  <div class="row">

    <div class="col-lg-3">
  <div class="list-group">
    <a href="#" class="list-group-item">
    <h4 class="list-group-item-heading">Lorem ipsum</h4>
    <p class="list-group-item-text">Lorem Ipsum is simply dummy text.</p></a>
  </div>
</div><!--end sidebar-->


<div class="col-lg-9">
  <div class="panel panel-default">
    <div class="panel-body">
      <div class="page-header">
     Main Content
    </div>
  </div>
</div><!--end main content area-->

推荐答案

您不能更改小屏幕中的列顺序,但可以在大屏幕中更改.

因此,请更改列的顺序.

<!--Main Content-->
<div class="col-lg-9 col-lg-push-3">
</div>

<!--Sidebar-->
<div class="col-lg-3 col-lg-pull-9">
</div>

默认情况下,首先显示主要内容.

因此,在移动设备中,主要内容首先显示.

通过使用col-lg-pushcol-lg-pull,我们可以在大屏幕上对列进行重新排序,并在左侧显示侧栏,在右侧显示主要内容.

工作fiddle here分钟.

Html相关问答推荐

填充在水平线css html中不起作用

类内没有标签的css样式文本

关于自动边距与绝对定位的混淆

css如何调整元素内容的高度

如何使用 CSS 提供整页背景图像并控制其不透明度?

编写在行之间具有多个标题的 HTML 表格的最佳方法是什么?

如何在 Common Lisp 中识别 dex:get 的输出是 JSON 还是 HTML?

从网站获取用于抓取地址的相关标签

如何在 flex 容器中左对齐图像?

为什么我的代码中的轮播幻灯片不起作用?

EM 中的高度不等于按钮和文本区域的相同值

如何按元素的水平对齐文本?

无法在生产构建中使用 LoadHTMLGlob 加载 html 文件

Tailwindcss 和 Flexbox 的意外行为

悬停状态之间的元素高度转换

试图隐藏一个按钮,当链接不存在时它是文本和图标

根据 HTML 属性设置元素的样式

如何使用 JavaScript/jQuery 滚动到页面顶部?

如何从对象 URL 获取文件或 blob?

谷歌 map 显示“仅用于开发目的”