Css 70%和30%的列具有引导功能_Css_Twitter Bootstrap

Css 70%和30%的列具有引导功能

css twitter-bootstrap

Css 70%和30%的列具有引导功能,css,twitter-bootstrap,Css,Twitter Bootstrap,我从一家招聘机构得到了这个“测试”：创建一个包含两层的页面模板，一层70%宽度，另一层70%宽度 30%的页面；在第一层将有内容，在二是特色形象我想知道我是否可以用Bootstrap实现这些精确的百分比，即使它不打算这样使用。为什么不明确定义该div的宽度 .30{ 宽度：30%；显示：块；浮动：对； } .70{ 宽度：70%；显示：块；浮动：左； } 您可以在这里添加内容图像的位置为什么不明确定义该div的宽度 .30{ 宽度：30%；显示：块；浮动：对； } .

我从一家招聘机构得到了这个“测试”：

创建一个包含两层的页面模板，一层70%宽度，另一层70%宽度 30%的页面；在第一层将有内容，在二是特色形象

我想知道我是否可以用Bootstrap实现这些精确的百分比，即使它不打算这样使用。

为什么不明确定义该div的宽度

.30{
宽度：30%；
显示：块；
浮动：对；
}
.70{
宽度：70%；
显示：块；
浮动：左；
}


您可以在这里添加内容
图像的位置

为什么不明确定义该div的宽度

.30{
宽度：30%；
显示：块；
浮动：对；
}
.70{
宽度：70%；
显示：块；
浮动：左；
}


您可以在这里添加内容
图像的位置

如果您可以添加自己的引导库：

转到：

将

@grid columns

变量设置为

在css上生成您自己的引导

现在，您的网格从

col-xs-1

到

col-lg-10

拥有

70%

和

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>


70%
30%

如果您可以添加自己的引导库：

转到：

将

@grid columns

变量设置为

在css上生成您自己的引导

现在，您的网格从

col-xs-1

到

col-lg-10

拥有

70%

和

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>


70%
30%

引导是一个框架，所以它是一个起点。。。就像汽车的底盘。。你会想在它的基础上再接再厉

要解决您的难题，首先要确定在屏幕分辨率方面，您希望何时发生拆分。e、 g.假设屏幕较小（平板电脑及以上）

您需要一个框架col，例如使用

.col-sm-4

.col-sm-8

。这将使用继承的css建立框架的响应，如

位置

，

最小高度

，

paddin-*

然后，您需要覆盖要更改的CSS。因为我们只希望在小屏幕上显示30/70，所以我们查看

variables.less

文件（在github上的引导程序中）

我们发现小屏幕在768px处有一个媒体断点（

@screen sm min

）。现在，您可以使用导入的变量构建一个更少的文件，或者只需在附加CSS中硬编码值（作为页面自己的CSS的一部分），如下所示：

    @media (min-width: 768px) {
      .col-sm-30 { width: 30%; }
      .col-sm-70 { width: 70%; }
    }

除了宽度，您不需要其他任何东西，因为其余部分将继承自

.col md-*

最后，您的代码将使用以下内容：


...
...

记住，*md-30必须出现在*md-4之后，以便*30覆盖*4。覆盖行为是由类定义的顺序驱动的，最后一个定义将获胜。

引导是一个框架，因此它是一个起点。。。就像汽车的底盘。。你会想在它的基础上再接再厉