Twitter Bootstrap Question posted in

Bootstrap lot of space between h1 and h2 – Twitter bootstrap

i have a structure made on twitter Bootstrap which you can see here:
http://codepen.io/DiV666/pen/zBxdmw

The problem is that there is lot of space between the rows containing the h1 (TITLE) and h2 (Subtitle). This space depends on the left menu, if you remove or add options, this space becomes larger or smaller.

To fix it I set overflow: hidden; in #page-content, but I do not know if this is the best way.

Can someone help?

Thank You.

Tags:

4

Answers


  1. 0

    Add Internal style as below:

     #page-content  .container-fluid .row::after
 {
     display: initial ;
 }
 #page-content  .container-fluid::after
 {
     display: initial ;
 }

    If it not works assign !important;

    Login or Signup to reply.
  2. 0

    Add overflow: hidden; into .row class

    .row {
    margin-right: -15px;
    margin-left: -15px;
    overflow: hidden;
}
    Login or Signup to reply.
  3. 0

    This is caused by the .row:after. Just set it to initial, otherwise it inherits the table display from its parent:

    .container-fluid .row:after{
  display: initial;
}
    Login or Signup to reply.
  4. 0

    Put both tags in the same row:

      <div class="row">
     <div class="col-md-12">
        <h1>TITLE</h1>
       <h2>Subtitle</h2>
     </div>
  </div>

    http://codepen.io/anon/pen/jAXkoJ

    If you want a fixed sidebar so it didn’t depend of the content of page-content, made it position fixed:

    #page-sidebar {
    width: 240px;
    padding: 0;
  position:fixed;
  min-height: 100%;
}

    http://codepen.io/anon/pen/NAZyQE

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search