Question

I am trying to build a responsive page with Bootstrap3. The problem that I'm having is that on smaller views(or with more than 1 line of content) my rightside column gets pushed underneath the other columns. I want it to stay on the right and shrink as needed.

Here's some HTML

<div class="container-fluid">
  <div class="row" id="row-for-buttons">
    <div class="col-xs-12  ">Full Width Scaling - This is persistant</div>
    <div id="for-the-buttons">
      <button id="sponsor">A Button</button><button id="donate">A Button Now</button><button id="new">A Button</button>
    </div>
  </div><!--- row --->


  <div class="row" id="main-site-row">
    <div class="col-xs-2" id="left-gutter">
      <ul>
        <li><a>Links</a>
        <li><a>Links</a>
        <li><a>Links</a>
        <li><a>Links</a>
        <li><a>Links</a>
        </ul>
    </div>
    <div class="col-xs-8" align="center" ><h2>The Main Stuff</h2>
      <div>
      Lom
    </div>
    <div class="picture">
      <img src="somwhere.jpg">
    </div>

      <div>
      Bacon ipsum dolor amet salami corned beef pastrami, picanha venison porchetta cupim beef rump cow doner.
      Landjaeger drumstick kevin, corned beef tri-tip ball tip cow ground round jowl short ribs pastrami jerky sausage
      capicola brisket. Hamburger andouille picanha tongue, biltong pastrami kielbasa short loin cupim capicola t-bone sausage
      strip steak. Salami flank pork loin meatball brisket sausage frankfurter boudin biltong short ribs pork chuck. Alcatra ground
      round pork belly, pork chop frankfurter fatback pork meatloaf corned beef ribeye. Turducken swine ball tip andouille capicola beef ribs tongue fatback.
</div>
<div>
  <button>A button</button>
  <button>A button</button>
</div>

    </div>
    <div class="col-xs-2" id="right-gutter">
      Bacon ipsum doloramet
    </div>
</div><!--- Row --->
</div>

Answer 1

Your markup looks to be invalid due to no closing tags for the list items <li> within </div id="left-gutter">.

With the markup issue resolved, and no custom styling applied, the result should be what you expect.

Working demo of your code with markup fixed

<div class="container-fluid">
  <div class="row" id="row-for-buttons">
    <div class="col-xs-12">Full Width Scaling - This is persistant
      <div id="for-the-buttons">
        <button id="sponsor">A Button</button>
        <button id="donate">A Button Now</button>
        <button id="new">A Button</button>
      </div>
    </div>
  </div>
  <div class="row" id="main-site-row">
    <div class="col-xs-2" id="left-gutter">
      <ul>
        <li><a>Links</a></li>
        <li><a>Links</a></li>
        <li><a>Links</a></li>
        <li><a>Links</a></li>
        <li><a>Links</a></li>
      </ul>
    </div>
    <div class="col-xs-8" align="center">
      <h2>The Main Stuff</h2>
      <div>
        Lom
      </div>
      <div class="picture">
        <img src="somwhere.jpg">
      </div>
      <div>
        Bacon ipsum dolor amet salami corned beef pastrami, picanha venison porchetta cupim beef rump cow doner. Landjaeger drumstick kevin, corned beef tri-tip ball tip cow ground round jowl short ribs pastrami jerky sausage capicola brisket. Hamburger andouille
        picanha tongue, biltong pastrami kielbasa short loin cupim capicola t-bone sausage strip steak. Salami flank pork loin meatball brisket sausage frankfurter boudin biltong short ribs pork chuck. Alcatra ground round pork belly, pork chop frankfurter
        fatback pork meatloaf corned beef ribeye. Turducken swine ball tip andouille capicola beef ribs tongue fatback.
      </div>
      <div>
        <button>A button</button>
        <button>A button</button>
      </div>
    </div>
    <div class="col-xs-2" id="right-gutter">
      Bacon ipsum doloramet
    </div>
  </div>
</div>

Bootstrap Right Column being pushed under content

1 个答案: