带 Bootstrap 的 70% 和 30% 色谱柱

Question

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

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

我想知道我是否可以使用 Bootstrap 实现这些精确的百分比，即使它不应该以这种方式使用。

Answer 1

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

1. 转至bootstrap cutomizing page:
2. 将@grid-columns 变量设置为10。
3. 在clicking on download 上生成您自己的引导 css。
4. 现在您的网格是从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 是一个框架 - 所以它是一个起点......就像汽车中的底盘......你想在它之上构建。

要解决您的难题，首先要决定何时（就屏幕分辨率而言）您希望进行拆分。例如让我们假设小屏幕（平板电脑及以上）。

1. 您需要一个框架 col，例如使用.col-sm-4 & .col-sm-8。这使用继承的 css（如 position、min-height、paddin-*）建立了框架的响应能力。

2. 然后您需要覆盖您想要更改的 CSS。由于我们希望只在小屏幕上显示 30/70，因此我们查看 variables.less 文件（在 github 上的 Bootstrap source 中）。

我们在那里发现小屏幕在 768px (@screen-sm-min) 处有一个媒体断点。现在您可以使用导入的变量构建一个 less 文件，或者只是将值硬编码在附加 CSS 中（作为您的页面自己的 CSS 的一部分），如下所示：

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

除了宽度你不需要其他任何东西，因为其余部分将继承自 .col-md-*

1. 最后，您的代码将使用这个：

    <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 。 override 行为由类定义序列驱动，最后一个获胜。

Answer 3

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

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

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

<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>