Question

以下代码，当我在浏览器中运行它（firefox，chrome和ie）时会导致内部div溢出：

浏览器中的

代码：

在jsfiddle中运行时，它可以完美地运行

我的实际代码，与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 1

您应该使用row代替row-fluid。

＆＃13;

<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>

＆＃13;

引导行流体溢出父标记之外

1 个答案: