Question

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

创建一个包含两个图层的页面模板，一个是70％宽度，另一个是第二个页面的30％;在第一层中将有内容，在第二个特色图片。

我想知道我是否可以使用Bootstrap达到那个确切的百分比，即使它不是那样用的。

Answer 1

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

转到bootstrap cutomizing page：
将@grid-columns变量设置为10。
在clicking on download上生成自己的bootstrap 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>

Answer 2

Bootstrap是一个框架 - 所以它是一个起点......就像汽车中的底盘......你想要在它上面构建。

要解决您的难题，首先要确定在屏幕分辨率方面何时需要进行拆分。例如我们假设小屏幕（平板电脑和平板电脑）。

你需要一个框架col，例如，使用.col-sm-4＆amp; .col-sm-8。这确定了框架与继承的css（position，min-height，paddin-*的响应能力。
然后您需要覆盖您想要更改的CSS。由于我们只想在小屏幕上显示30/70，我们会查看variables.less文件（在github上的Bootstrap source中）。

我们在那里发现小屏幕的媒体断点为768px（@screen-sm-min）。现在，您可以使用导入的变量构建一个较少的文件，或者只是在附加CSS（作为您的页面拥有CSS的一部分）中对该值进行硬编码：

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

除了宽度之外你不需要任何其他东西，其余的将继承自.col-md-*

最后，您的代码将使用此：

    <div class="row">
      <div class="col-md-4 col-md-30">...</div>
      <div class="col-md-8 col-md-70">...</div>
    </div>

请记住， * md-30 必须出现在 * md-4 之后，以便 * 30 覆盖 * 4 。覆盖行为由类定义序列驱动，其中最后一个胜出。

Answer 3

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

＆＃13;

.thirty {
  width: 30%;
  display: block;
  float: right;
}

.seventy {
  width: 70%;
  display: block;
  float: left;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-md-4 seventy">Here You can add the content</div>
    <div class="col-md-8 thirty">Place for the image</div>
  </div>
</div>

＆＃13;

使用Bootstrap的70％和30％列

3 个答案: