关于bootstrap 3. 3.7中的左右分栏

漂流办公工作室

已于 2022-02-06 11:20:57 修改

阅读量1.5k

点赞数

分类专栏： boootstraps笔记文章标签： bootstrap

于 2021-06-13 21:53:51 首次发布

本文链接：https://blog.csdn.net/m0_46530414/article/details/117885965

版权

boootstraps笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在nav导航栏 class类中在增加了 navbar-brand 居然自动左右分栏了，好奇怪，特此记录.

整个代码使用的菜鸟里面的实例导航条，不过，竖着处理了，具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>这是navbar测试文件</title>
  <link rel="stylesheet" href="css3/bootstrap.css">
  <script src="js3/jquery-3.5.1.js"></script>
  <script src="js3/bootstrap.js"></script>
</head>
<body>
<div class="container">
  <h2>动态标签</h2>
  <p><strong>提示:</strong> 与 .tab-pane 和 data-toggle="tab" (data-toggle="pill" ) 一同使用, 设置标签页对应的内容随标签的切换而更改。</p>
  <ul class="nav nav-tabs nav-stacked  navbar-brand " role="tabs">
    <li class="active"><a data-toggle="tab" href="#home">首页</a></li>
    <li><a data-toggle="tab" href="#menu1">菜单 1</a></li>
    <li><a data-toggle="tab" href="#menu2">菜单 2</a></li>
    <li><a data-toggle="tab" href="#menu3">菜单 3</a></li>
  </ul>

  <div class="tab-content">
    <div id="home" class="tab-pane fade in active">
      <h3>首页</h3>
      <p>菜鸟教程 —— 学的不仅是技术，更是梦想！！！</p>
    </div>
    <div id="menu1" class="tab-pane fade">
      <h3>菜单 1</h3>
      <p>这是菜单 1 显示的内容。这是菜单 1 显示的内容。这是菜单 1 显示的内容。</p>
    </div>
    <div id="menu2" class="tab-pane fade">
      <h3>菜单 2</h3>
      <p>这是菜单 2 显示的内容。这是菜单 2 显示的内容。这是菜单 2 显示的内容。</p>
    </div>
    <div id="menu3" class="tab-pane fade">
      <h3>菜单 3</h3>
      <p>这是菜单 3 显示的内容。这是菜单 3 显示的内容。这是菜单 3 显示的内容。</p>
    </div>
  </div>
</div>

</body>
</html>

运行结果，直接左右分栏。

代码说明：用 data-toggle 来跳转，tab-pan fade 隐藏相对应的标签页，最后那部分没有贴出来，用 ajax 请求去传数据，完美