user308553 user308553 - 5 months ago 32
HTML Question

bootstrap row fluid overflowing outside of parent tag

The following code, when I run it in browsers (firefox, chrome and ie) would result in inner div overflowing:

in browser:
http://imgur.com/ebX5hrX

code:

https://jsfiddle.net/DTcHh/21510/

When run in jsfiddle it works perfectly

my actual code, which is pretty much the same as the one in jsfiddle

<html>

<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>


</head>

<body>

<div class = "main-Frame container-fluid" > <!-- mid section -->
<div class="well row-fluid" >
<div class="body-wrapper" >
<p>Pay</p>
<hr/>
<div class="col-md-2" style="background-color:red">

<p>
asdfas
</p>

<p>
asdfas
</p>

<p>
asdfas
</p>

<p>
asdfas
</p>
<p>
asdfas
</p>
<p>
asdfas
</p>
</div>
<div class="col-md-10"></div>
</div>
</div>

</div>
</body>
</html>

Answer

You should use row in place of row-fluid.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

<div class = "main-Frame container-fluid" > <!-- mid section -->
  <div class="well row" >
    <div class="body-wrapper" >
    <p>Pay</p>
    <hr/>
      <div class="col-md-2" style="background-color:red">
        <p>asdfas</p>
        <p>asdfas</p>
        <p>asdfas</p>
        <p>asdfas</p>
        <p>asdfas</p>
      </div>
      <div class="col-md-10"></div>
    </div>
  </div>
</div>

Comments