html - 让 Bootstrap 行中的最后一列占据视口(viewport)宽度的其余部分

Question

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

我需要一个带有 col-xs-3 列的常规 .container，然后下一列应该简单地填充浏览器视口(viewport)的其余部分。大的“全宽”列的内容应该一直填充到浏览器的右侧。

虽然我确实意识到这违反了网格规则，但对我来说很重要，第一个列 (.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 将在 flex 方向(在本例中为行)填充容器的剩余空间。