How do I access certain column in bootstrap grid system?

问题

In the bootstrap grid system, there are 12 columns and col - *- * class is used to group together certain number of columns. But when I want to use the first 3 columns and then just the last column how do I do that, that is, how can I use certain columns and not others in a single row class?

Like when I make a page header, I give the title on the left hand side and certain other text on the right side of the header, I assume I can use the grid system here effectively, given that I can access certain columns.

回答1:

Use the .offset-* class (.col-md-offset-* class for versions older than 4.0.0). For instance, occupy first 4 cols, and only the last 2 cols as follows:

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-2 offset-md-6">.col-md-6 .offset-md-2</div>
</div>

Bootstrap v4.0.0-alpha.6

.b { background: #CCC; height: 80px; }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="b col-sm-4"></div>
    <div class="b offset-sm-6 col-sm-2"></div>
  </div>
</div>

Bootstrap v3.3.7

.b { background: #CCC; height: 80px; }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row">
    <div class="b col-xs-4"></div>
    <div class="b col-xs-offset-6 col-xs-2"></div>
  </div>
</div>

回答2:

First create 3 columns, then 8 columns, after that create the last column and you write the code in only first three and last one like this. think of it like a graph sheet.

<div class="col-md-3">
<!-- things you want in first three columns: code here-->
</div>
<div class="col-md-8">
<!-- leave this blank-->
</div>
<div class="col-md-1">
<!-- things you want in last column : code here-->
</div>

回答3:

Use with col-md-offset-*.

like this

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

回答4:

If you want three column next to each other and only use the last one you can simply just put in content in the last one like this:

<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4">Content here</div>
</div>

回答5:

If I understand your question correctly, you want to be able to single out specific columns in your row of 12.

<div class='row'>
  <div id='first' class='col-sm-4'>
    <p>Column 1</p>
  <div>
  <div id='second' class='col-sm-4'>
    <p>Column 2</p>
  <div>
  <div id='third'class='col-sm-4'>
    <p>Column 3</p>
  <div>
</div>

If you want to select specific columns, you could give them an id to uniquely identify them. If you would want to select the first and third column and change their background color to lightblue you could do this:

#first, #third{
background-color: lightblue;

}

回答6:

You will have to use the .col-[xs|md|lg|xl]-offset-* classes in bootstrap, see here

For example, if you want the layout of your page to have only the first 3 columns and the last column containing elements just do:

<div class="row">
    <div class="col-md-3">
        <span>some text</span>
    </div>
    <div class="col-md-offset-8 col-md-1">
        <span>some more text</span>
    </div>
</div>

回答7:

<div>
<div class="col-md-3" style="text-align:left">
    <h1>Title</h1>
</div>
 <div class="col-md-3"></div>
 <div class="col-md-3"></div>
 <div class="col-md-3" style="text-align:right">
       <p>Description</p>
 </div>

来源：https://stackoverflow.com/questions/41577309/how-do-i-access-certain-column-in-bootstrap-grid-system