我在尝试在使用 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;
}
}
}
如果我真正理解你,你可以使用flexbox:
.row{
width: 100vw;
display: flex;
}
.col-xs-9{
flex: 1;
}
带有
flex: 1
的 div 将在弯曲方向(在本例中为行)填充容器的剩余空间。
据我了解,问题是如何使用 Bootstrap 来做到这一点。这可以在 Bootstrap 中通过对第一个 div 使用 col-xs-3 并对第二个 div 使用 col-xs 来完成。 通过不指定列数,Bootstrap 会自动将容器宽度的其余部分分配给第二个 div。