Fatal编程技术网

Twitter bootstrap 带右侧固定边栏的引导响应网格

twitter-bootstrap css twitter-bootstrap-3

Twitter bootstrap 带右侧固定边栏的引导响应网格,twitter-bootstrap,css,twitter-bootstrap-3,Twitter Bootstrap,Css,Twitter Bootstrap 3,我想用这样的引导创建一个模板，它尊重网格的响应系统： 在图片中，导航栏和右侧（包含两个按钮）是粘性的（始终显示在视图上） 我的问题是右侧，因为在引导网格系统中，右侧块将被视为一行，而主要内容包含多行。如何做到这一点？您可以潜在地将它们分离到各自的容器中，例如： <body> <div class="navbar navbar-default"> Navbar </div> <div class="main-content col-md

我想用这样的引导创建一个模板，它尊重网格的响应系统：

在图片中，导航栏和右侧（包含两个按钮）是粘性的（始终显示在视图上）

我的问题是右侧，因为在引导网格系统中，右侧块将被视为一行，而主要内容包含多行。如何做到这一点？

您可以潜在地将它们分离到各自的
容器中，例如：

<body>
    <div class="navbar navbar-default"> Navbar </div>

    <div class="main-content col-md-10"> Main Content </div>

    <div class="right-btn-group col-md-2"> Right buttons </div>
</body>


导航栏
主要内容
右键
这样，右侧就与主要内容分开了。然后我可能再次误解了这个问题。

你是在找这样的东西吗？您可以根据需要调整右容器的宽度。无需编辑bootstrap.css或编写自定义引导类

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <style>
    body{
      width: 100%;
      height: 100%;
      color: #fff;
    }
    header, footer{
      height: 100px;
    }
    header{
      width: 100%;
      background: #000;
    }
    .content-container{
      width: 100%;
      position: relative;
    }
    .left-container{
      width: calc(100% - 90px); /* adjust */
      height: 100%;
    }
    .right-container{
      width: 90px; /* adjust */
      height: 100%;
      position: absolute;
      right: 0;
      top: 0;
      background: blue;
    }
    .main-content{
      height: 500px;
      background: #ff0000;
    }
    footer{
      width: 100%;
      background: #ed1899;
    }
  </style>
</head>
<body>
<div class="container-fluid">
  <div class="row">

    <header class="nav">nav bar</header>

    <div class="content-container">

      <div class="left-container">
        <div class="main-content">
          //main content
        </div>
        <footer>
          //footer content
        </footer>
      </div>

      <div class="right-container">buttons</div>

    </div>

  </div>
</div>
</body>
</html>


文件
身体{
宽度：100%；
身高：100%；
颜色：#fff；
}
页眉、页脚{
高度：100px；
}
标题{
宽度：100%；
背景：#000；
}
.内容容器{
宽度：100%；
位置：相对位置；
}
.左货柜{
宽度：计算（100%-90px）；/*调整*/
身高：100%；
}
.右集装箱{
宽度：90px；/*调整*/
身高：100%；
位置：绝对位置；
右：0；
排名：0；
背景：蓝色；
}
.主要内容{
高度：500px；
背景：#ff0000；
}
页脚{
宽度：100%；
背景：#ed1899；
}
导航条
//主要内容
//页脚内容
按钮
围绕整个引导网格（容器>行>列..）创建一个包装器，以包含固定导航和右侧边栏

<div class="wrapper">
        <!-- top nav -->
        <nav>
            ...
        </nav>

        <!-- main -->
        <div class="left" id="main">
            <div class="container-fluid">
                <h1>Bootstrap Grid...</h1>
            </div>
        </div>

        <!-- sidebar -->
        <div class="right" id="sidebar">
            Fixed right sidebar
        </div>
</div>


...
引导网格。。。
固定右侧边栏

是的，但是使用此方法，右侧的宽度是col类的witdh，并且不可能将此宽度自定义为右侧？如果要自定义列宽格式，我建议查看，特别是“自定义容器大小”部分。是否希望侧边栏成为12列（1或2列宽）的一部分或者12列应该与主要内容一样宽（它是否是网格的一部分）？“右侧街区将被视为一排”：嗯？你是说一列吗？是的，我希望我的边栏是网格的一部分（1列宽）。我不知道一个好的响应系统在网格周围构建一个包装器而不是在网格中构建它是否好。将网格包含在一个外部包装器中没有什么错。重要的是嵌套网格使用
container fluid>row>cols