70% and 30% columns with Bootstrap

问题

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.

回答1:

If you can add your own bootstrap library :

Go to bootstrap cutomizing page:
Set the @grid-columns variable to 10.
Generate your own bootstrap css on clicking on download.
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>

回答2:

Bootstrap is a framework - so it's a starting point... like a chassis in a car.. you'd want to build on top of it.

To resolve your conundrum start with deciding when, in terms of screen resolution, you want that split to happen. e.g. lets assume small screens (tablets and up).

You'll need one of the framework col's, in the e.g. use .col-sm-4 & .col-sm-8. This establishes the responsiveness of the framework with inherited css like position, min-height, paddin-*.
Then you'll need to override the CSS you want changed. Since we're looking to only show 30/70 on small screen an up we look to the variables.less file (in the Bootstrap source on github).

We find in there that small screens have a media breakpoint at 768px (@screen-sm-min). Now you can build a less file with the variable imported, or just hard code the value in a add-on CSS (as part of your pages own CSS) the following:

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

You don't need anything else but width, as the rest will be inherited from .col-md-*

Finally, your code will then use this:

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

Remember, that *md-30 must appear after *md-4 so that the *30 overrides the *4. The override behaviour is driven by the sequence of class definitions, where the last one wins.

回答3:

Why don't you explicitly define the width for that 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>

来源：https://stackoverflow.com/questions/36800170/70-and-30-columns-with-bootstrap

标签

css

twitter-bootstrap