让引导行中的最后一列占据视口宽度的其余部分

Question

我在尝试在使用 Twitter 引导网格的网站上创建布局部分时遇到了一些麻烦。

我需要一个常规的

.container

和

col-xs-3

列，然后下一列应该简单地填充浏览器视口的其余部分。大“全宽”列的内容应一直填充 div 直至浏览器的右侧。

虽然我确实意识到这违反了网格规则，但对我来说很重要的是，第一列（

.col-xs-3

）使用与所有其他列完全相同的左侧位置来保持内容水平对齐。

请参阅附图以了解详情：

我绝对愿意接受在中间部分不使用 boostrap 网格的情况下执行此操作的建议，但是，平板电脑及上方的左侧位置仍然很重要。

有什么建议吗？ :-)

编辑：

这是我的标记：

<div class="product-slideshow">
    <div class="container">
        <div class="row">
            <div class="col-xs-3 categories">
                <ul>
                    <li><a>Product 1</a></li>
                    <li><a>Product 2</a></li>
                    <li><a>Product 3</a></li>
                    <li><a>Product 4</a></li>
                </ul>
            </div>

            <!-- This column should span all the way to the right side of the browser -->
            <div class="col-xs-9 images">
                <div class="slider-wrapper">
                    <img class="slide" src="..." />
                    <img class="slide" src="..." />
                    <img class="slide" src="..." />
                    <img class="slide" src="..." />
                </div>
            </div>
        </div>
    </div>
</div>

编辑2：

实际上同时解决了这个问题。我使用 Slick.js slider 作为大列中的幻灯片/内容，显然，以下 CSS (SASS) 就达到了目的：

.products-slideshow {
    overflow-x: hidden;

    .images {
        position: relative;

        .slider-wrapper {
            max-width: calc(100vw - 25%); // 25% being the col-xs-3 width
            position: absolute;
            height: auto;
        }
    }
}

Answer 1

如果我真正理解你，你可以使用flexbox：

.row{
  width: 100vw;
  display: flex;      
 }

 .col-xs-9{
   flex: 1;
 }

带有

flex: 1

的 div 将在弯曲方向（在本例中为行）填充容器的剩余空间。

Answer 2

据我了解，问题是如何使用 Bootstrap 来做到这一点。这可以在 Bootstrap 中通过对第一个 div 使用 col-xs-3 并对第二个 div 使用 col-xs 来完成。 通过不指定列数，Bootstrap 会自动将容器宽度的其余部分分配给第二个 div。