rmcsharry rmcsharry - 2 months ago 8
CSS Question

Bootstrap page body child rows are pushing beyond parent

I understand the problem, as described and answered here.

I have quite a complicated layout with a sidebar navigation, a top navigation, a fluid-container and then page-title and page-body structure for each page. So just adding another container did not solve the problem as suggested in that answer.

Once I get into the page-body, all the rows are stretching 'outside' the parent page-body. You can see it here.

Notice I have added padding to the default container-fluid to 'pull' all the content in from each side of the page. Removing them does not fix it.

I've tried every change I can think of except removing the padding from the default row, because I'm pretty sure that is a no-no.

Anyone have any idea how to get those pesky form controls to stay 'inside' the page body?

Answer

There is two solution either give an additional class to row and manipulate its layout or don't use row use <div class="col-md-*" /> without parent .row class div as many times u want and use <div class="clearfix"> if you want to break forcefully to next row

EDIT:- For example

<div class="row">
  <div class="col-md-4">div1</div>
  <div class="col-md-4">div2</div>
  <div class="col-md-4">div3</div>
</div>
<div class="row">
  <div class="col-md-4">div4</div>
  <div class="col-md-4">div5</div>
  <div class="col-md-4">div6</div>
</div>

The same can be achieved without .row class

  <div class="col-md-4">div1</div>
  <div class="col-md-4">div2</div>
  <div class="col-md-4">div3</div>
  <div class="clearfix">div4</div>
  <div class="col-md-4">div5</div>
  <div class="col-md-4">div6</div>
  <div class="col-md-4">div1</div>