Bootstrap 网格设置 - 在固定元素中间有一个自动调整元素

Question

我正在想办法让其中一个网格元素自动填充固定宽度的其他元素之间的宽度间隙，这样无论父元素有多宽，它们都会一起填充它们的父元素的宽度元素群岛如果我想做的事情是可能的，有人可以启发我吗？如果是的话，应该如何正确完成。

这是我要实现的目标的图像：

Answer 1

这是使用 flexbox 完成您要求的一种方法。

      <style>

        .row {
          display: flex;
          display: -webkit-flex;
          flex-direction: row;
          -webkit-flex-direction: row;
        }
        .col-left {
          flex: 1;
          min-width: 120px;
        }
        .col-center {
          flex: 3;
        }
        .col-right {
          flex: 1;
          min-width: 120px;
        }

              </style>
            </head>
              <body>

                <section>
                  <div class="row">
                    <div class="col-left" style="background-color: lightgreen; height: 20em;">
                    </div>

                    <div class="col-center" style="background-color: violet; height: 20em;">
                    </div>

                    <div class="col-right" style="background-color: lightgreen; height: 20em;">
                    </div>

                  </div>
                </section>

    </body>

DEMO

Answer 2

这是一个 css，但您需要提及剩余部分的宽度以占整个 space。

    .container {
    width:600px;
    height:200px;
    border:1px solid;
    background:yellow;
    display:table-row;
}
.left {
    width:200px;
    height:20%;
    background:red;
    overflow:hidden;
        display:table-cell;
}
.right {
    height:200px;
    width:20%;
    background:blue;
    display:table-cell;
}
.middle {
    height:200px;
    width: 60%;
    background:green;
    display:table-cell;
}

如果您将 div 的宽度硬编码为某些像素，那么您可以使用 calc 属性并减去容器宽度的 100% 以获得结果

Bootstrap 网格设置 - 在固定元素中间有一个自动调整元素

Bootstrap Grid Setup - Having an auto-fit element in the middle of fixed elements

css

grid

twitter-bootstrap