左侧和右侧具有固定宽度列的自举行

时间:2018-05-11 13:35:17

标签: html css twitter-bootstrap-3

我的固定左,固定右和内容的css必须是这样的,左边和右边的div是固定的,内容div是最大宽度减去两个固定宽度div的宽度,而div是don即使屏幕宽度小于(fixed-left.width + fixed-right.width),也要在另一个下面滚动?

<div class="row" id="row01">
  <div class="fixed-left">
    <div class="fixed-left-a">001</div>
    <div class="fixed-left-b">Item 1</div>
  </div>
  <div class="content">
    <div class="row">
      <div class="col-xs-4 col-md-3">1,234</div>
      <div class="col-xs-4 col-md-3">1,234</div>
      <div class="col-xs-4 col-md-3">1,234</div>
      <div class="col-xs-4 col-md-3">1,234</div>
    </div>
  </div>
  <div class="fixed-right">
    <span>A</span>
  </div>
</div>

<div class="row" id="row02">
  ...
</div>

我想在主要内容中使用bootstrap 3网格,但是每行的固定属性不需要左右部分可变大小。

编辑:

我希望输出看起来像附加的图像。

enter image description here

3 个答案:

答案 0 :(得分:1)

您可以将保证金设置为内容margin: 0 100px;

  

这里100px是你固定的元素宽度。

* {
  margin: 0;
  padding:0;
  box-sizing:border-box;
}
.fixed-left, .fixed-right {
  position: fixed;
  width: 100px;
  top: 0;
  bottom: 0;
}
.fixed-left {
  left: 0;
  background: yellow;
}
.fixed-right {
  right: 0;
  background: purple;
}
.content {
    background: pink;
    width: 100%;
    margin: 0 100px;
    height: 100vh;
}
<div class="row" id="row01">
  <div class="fixed-left">
    <div class="fixed-left-a">001</div>
    <div class="fixed-left-b">Item 1</div>
  </div>
  <div class="content">
    <div class="row">
      <div class="col-xs-4 col-md-3">1,234</div>
      <div class="col-xs-4 col-md-3">1,234</div>
      <div class="col-xs-4 col-md-3">1,234</div>
    </div>
  </div>
  <div class="fixed-right">
    <span>A</span>
  </div>
</div>

答案 1 :(得分:0)

您可以使用calc设置width

content

&#13;
&#13;
.fixed-left, .fixed-right {
  position: fixed;
  width: 100px;
  top: 0;
  bottom: 0;
}
.fixed-left {
  left: 0;
  background: yellow;
}
.fixed-right {
  right: 0;
  background: purple;
}
.content {
    background: pink;
    width: calc(100% - 200px);
    margin: 0 auto;
    height: 100vh;
}
&#13;
<div class="row" id="row01">
  <div class="fixed-left">
    <div class="fixed-left-a">001</div>
    <div class="fixed-left-b">Item 1</div>
  </div>
  <div class="content">
    <div class="row">
      <div class="col-xs-4 col-md-3">1,234</div>
      <div class="col-xs-4 col-md-3">1,234</div>
      <div class="col-xs-4 col-md-3">1,234</div>
    </div>
  </div>
  <div class="fixed-right">
    <span>A</span>
  </div>
</div>
&#13;
&#13;
&#13;

查看full-page中的代码段并尝试调整浏览器窗口的大小

答案 2 :(得分:0)

https://stackoverflow.com/a/29532261/2193381提供了一个非常简单的解决方案。这不是我想到的方法,可能会产生意想不到的影响,但仍然很有趣。

简而言之,pull-leftpull-right固定宽度div在设置中央浮动宽度div之前。