Как сделать правую колонку в bootstrap?

Question

[codemix]

Как сверстать с помощью bootstrap правые колонки в ряд не зависимо от левого?
Такой макет
Вот как получаеться

Answer 1

[Nemby]

Я бы так сделал:

<div class="container">
<div class="row">
<div class="col-md-8">
	<div class="thumbnail">первая "широкая"колонка для контента</div>
</div>
<div class="col-md-4">
	<div class="thumbnail">вторая боковая колонка</div>		
	<div class="thumbnail">третья боковая колонка - под второй</div>
</div>
</div>
</div>

Comments

[Nemby]

Посмотрите еще сам код странице

<main class="container">
  <div class="row">

    <div class="col-md-8">
    <section class="m-content clearfix">
      <article class="post-art">
        <h2>Featured Image (Horizontal)</h2>
          <ul class="post-tags">
            <li>Posted in:</li>
            <li><a href="#" class="tag">Featured</a></li>
            <li><a href="#" class="tag">Image</a></li>
            <li><a href="#" class="tag">Photography</a></li>
          </ul>
        <img src="app/img/post-img.jpg" class="img-responsive" alt="">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
           sed diam nonummy nibh euismod tincidunt ut laoreet dolore
           magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</p>
      </article>
    </section>
  </div>

  <div class="col-md-4">
    <aside class="r-bar">
      <h2>About <span>ESCRITOR</span></h2>
      <img src="app/img/layer-4.png" class="center-block" alt="">
      <p>
        Hello this is ESCRITOR born for create a modern blog by ThemeAttelier.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt...Lorem ipsum dolor sit amet, consectetur adipisicing
        elit, sed do eiusmod tempor incididunt...
      </p>
    </aside>
  </div>


  </div>
  <div class="col-md-8">
  <section class="m-content clearfix">
    <article class="post-art">
      <h2>Featured Image (Horizontal)</h2>
        <ul class="post-tags">
          <li>Posted in:</li>
          <li><a href="#" class="tag">Featured</a></li>
          <li><a href="#" class="tag">Image</a></li>
          <li><a href="#" class="tag">Photography</a></li>
        </ul>
      <img src="app/img/post-img.jpg" class="img-responsive" alt="">
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
         sed diam nonummy nibh euismod tincidunt ut laoreet dolore
         magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</p>
    </article>
  </section>
</div>

<div class="col-md-4">
  <aside class="r-bar">
    <h2>About <span>ESCRITOR</span></h2>
    <img src="app/img/layer-4.png" class="center-block" alt="">
    <p>
      Hello this is ESCRITOR born for create a modern blog by ThemeAttelier.
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt...Lorem ipsum dolor sit amet, consectetur adipisicing
      elit, sed do eiusmod tempor incididunt...
    </p>
  </aside>
</div>


<div class="col-md-8">
<section class="m-content clearfix">
  <article class="post-art">
    <h2>Featured Image (Horizontal)</h2>
      <ul class="post-tags">
        <li>Posted in:</li>
        <li><a href="#" class="tag">Featured</a></li>
        <li><a href="#" class="tag">Image</a></li>
        <li><a href="#" class="tag">Photography</a></li>
      </ul>
    <img src="app/img/post-img.jpg" class="img-responsive" alt="">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
       sed diam nonummy nibh euismod tincidunt ut laoreet dolore
       magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</p>
  </article>
</section>
</div>
</main>

[codemix]

Nemby: Спасибо, помогло Thumbnails. а что с кодом?

[Nemby]

Все норм! просто я немного не понял))

[Nemby]

https://www.youtube.com/watch?v=AYkEfr-5b1o&index=1&list=PLypd1VrGv7FPokhw3f5pwBQTHsU9T2mBq

может будет полезно - видео уроки по bootstarp 3
(сам смотрю эти уроки-работает)