Question

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

我需要一个带有.container列的常规col-xs-3，然后下一列应该只填充浏览器视口的其余部分。大＆＃34;全宽＆＃34;的内容列应该将div一直填充到浏览器的右侧。

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

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

1 个答案: