使用 Bootstrap 的 70% 和 30% 列 [英] 70% and 30% columns with Bootstrap

问题描述

我从招聘机构那里得到了这个测试":

<块引用>

创建一个包含两层的页面模板，一层宽度为 70%，第二层页面的 30%；在第一层会有内容，在其次是特色图片.

我想知道我是否可以通过 Bootstrap 达到这些准确的百分比，即使它不打算那样使用.

解决方案

如果您可以添加自己的引导程序库 :

1. 转到引导程序自定义页面:
2. 将 @grid-columns 变量设置为 10.
3. 在点击下载时生成您自己的引导 css.
4. 现在您的网格从 col-xs-1 到 col-lg-10.

要有 70% 和 30% :

<div class="col-xs-10 col-sm-7">70%</div><div class="col-xs-10 col-sm-3">30%</div>

I got this "test" from a recruiting agency:

Create a page template with two layers, one 70% width and the second 30% of the page; in the first layer there will be the content, in the second the featured image.

I was wondering if I can achieve those exact percent with Bootstrap even if it's not meant to be used that way.

解决方案

If you can add your own bootstrap library :

1. Go to bootstrap cutomizing page:
2. Set the @grid-columns variable to 10.
3. Generate your own bootstrap css on clicking on download.
4. Now your grid is from col-xs-1 to col-lg-10.

To have 70% and 30% :

<div class="row">
    <div class="col-xs-10 col-sm-7">70%</div>
    <div class="col-xs-10 col-sm-3">30%</div>
</div>

这篇关于使用 Bootstrap 的 70% 和 30% 列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！