0

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.

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?

Community
  • 1
  • 1
rmcsharry
  • 5,363
  • 6
  • 65
  • 108
  • 1
    there is two solution either give an additional class to row and manipulate its layout or don't use row use `
    ` without parent `.row` class div as many times u want and use
    if you want to break forcefully to next row
     – Atal Kishore Sep 13 '16 at 13:10
  • @AtalKishore Thank you! I used the second method and removed the rows (and have not yet needed to forcefully break to a new row). I guess I was abusing the row class :) Would you like to post your comment as an answer? – rmcsharry Sep 13 '16 at 13:23

1 Answers1

1

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>
Atal Kishore
  • 4,480
  • 3
  • 18
  • 27