A multi-line column

Navigation
1

I already looked in documentation and could not get the expected result using the bootstrap. The image best illustrates what I want to do 

<divclass="container">
    <div class="col-lg-4">
        <div class="content-section-b">
            <h4 class="cat-heading">@Html.ActionLink("Artigos", "Index", "Artigos")</h4>
            <hr class="section-heading-spacer">
            <div class="clearfix"></div>
                <h4 class="section-heading marginTop-0">@artigo.titulo</h4>
                <p class="lead" style="font-size:14px;">@artigo.descricao</p>
                <small><a href="#">Download Artigo</a></small>
        </div>
    </div>

    <div class="col-lg-4">
        <div class="content-section-b">
            <h4 class="cat-heading">@Html.ActionLink("Videos", "Index", "Videos")</h4>
            <hr class="section-heading-spacer">
            <div class="clearfix"></div>
            <h4 class="section-heading marginTop-0">
                @video.titulo
            </h4>
            <iframe width="300" height="200" src="//www.youtube.com/embed/@video.url" frameborder="0"></iframe>
        </div>
    </div>


    <div class="col-lg-4">
        <div class="content-section-b">
            <div class="list-group">
                <a href="#" class="list-group-item active">
                    Agenda
                </a>
                <div style="height:550px;overflow-y:auto">
                    <a href="#" class="list-group-item"><small>21/02/2015</small> - Dapibus ac facilisis in Dapibus ac facilisis in Dapibus ac facilisis in </a>
                    <a href="#" class="list-group-item"><small>21/02/2015</small> - Morbi leo risus</a>
                    <a href="#" class="list-group-item"><small>21/02/2015</small> - Porta ac consectetur ac</a>
                    <a href="#" class="list-group-item"><small>21/02/2015</small> - Vestibulum at eros</a>
                    <a href="#" class="list-group-item"><small>(21/02/2015)</small> - Dapibus ac facilisis in</a>
                    <a href="#" class="list-group-item"><small>(21/02/2015)</small> - Morbi leo risus</a>
                    <a href="#" class="list-group-item"><small>(21/02/2015)</small> - Porta ac consectetur ac</a>
                    <a href="#" class="list-group-item"><small>(21/02/2015)</small> - Vestibulum at eros</a>
                    <a href="#" class="list-group-item"><small>(21/02/2015)</small> - Dapibus ac facilisis in</a>
                    <a href="#" class="list-group-item"><small>(21/02/2015)</small> - Morbi leo risus</a>
                    <a href="#" class="list-group-item"><small>(21/02/2015)</small> - Porta ac consectetur ac</a>
                    <a href="#" class="list-group-item"><small>(21/02/2015)</small> - Vestibulum at eros</a>
                </div>
            </div>
        </div>

    </div>
</div>

But when you try to add more column it generates a new line.

    
asked by anonymous 22.07.2014 / 19:08

3 answers

3

To get the grid structure use this code

HTML 

<div class="row">
  <div class="col-xs-8">
    <div class="row">
      <div class="col-xs-6"> .col-xs-6 </div>
      <div class="col-xs-6"> .col-xs-6 </div>
    </div>
    <div class="row">
      <div class="col-xs-6"> .col-xs-6 </div>
      <div class="col-xs-6"> .col-xs-6 </div>
    </div>
    <div class="row">
      <div class="col-xs-6"> .col-xs-6 </div>
      <div class="col-xs-6"> .col-xs-6 </div>
    </div>
  </div>
  <div class="col-xs-4"></div>
</div>

You can see the result in this DEMO

Each column of the grid has sizes ranging from 1 to 12, this you have already understood, it has 4 types of columns with different behavior in each resolution.

  • col-xs-xx (Keeps grid for screens below
22.07.2014 / 19:28
2

You have to create a div with width 8 on the left, and one with width 4 on the right. There inside the div with width 8 you will create 2 columns with width 6 and 3 lines.

    
22.07.2014 / 19:20
2

There are two columns, respectively, of 8 and 4 spaces, totaling 12 - the natural maximum for Bootstrap 3.

Within the first column of 8 spaces, we will have another two with 6, totaling also 12.

  

But how can a column of 6 already within a column of lower value?

A: Column breaks are based on your parent's size, which makes the percentage come up. In this case, it would be 2x of 6 columns, resulting in 12 being the maximum width, in layers, allowed by the parent entity / upper.

HTML: 

<div class="container">
  <div class="col-lg-8">
    <div class="row">
      <div class="col-lg-6">
        <div class="mini-block">
          rock your body
        </div>
      </div>
      <div class="col-lg-6">
        <div class="mini-block">
          rock your body
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-6">
        <div class="mini-block">
          rock your body
        </div>
      </div>
      <div class="col-lg-6">
        <div class="mini-block">
          rock your body
        </div>
      </div>
    </div>
  </div>
  <div class="col-lg-4">
    <div class="big-block">
        do you like to rock your body?
    </div>
  </div>
</div>

CSS: 

.col-lg-6 {
    margin-bottom: 10px;
  }

.mini-block {
    background-color: purple;
    color: #fff; 
  }

.big-block {
    background-color: yellow;
    position: relative;
  }

Demonstration

    
22.07.2014 / 19:26
mascara and form validation Print without confirmation window in PHP, Javascript or Ajax