Question

我使用带有以下代码的容器内部行的面板，我的行溢出容器......

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Case</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
 <div class="panel panel-info">
  <div class="row">
  <h1>My first Bootstrap website!</h1>      
  <p>This page will grow as we add more and more components from Bootstrap...   </p>      
  </div>
  <div class="row">
  <h1>My first Bootstrap website!</h1>      
  <p>This page will grow as we add more and more components from Bootstrap...</p>      
  </div>

</div>
</div>

</body>
</html>

JSFiddle：https://jsfiddle.net/rdRpx/280/

任何帮助/建议都将不胜感激......

Answer 1

添加了Panel Body，并包含了用于处理行的网格。定义行时，您要定义网格元素。或者这至少是文档似乎建议的内容。

你可以使用第二个容器而不是面板主体，你会注意到面板主体向下推动页面的顶部和底部，所以也许避免使用h1标签并在bootstrap中找到另一个标签来放大字体？面板标题怎么样？

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
    <div class="container-fluid">
        <div class="panel panel-info">
            <div class="panel-body">
                <div class="row">
                    <div class="col-xs-12">
                        <h1>My first Bootstrap website!</h1>
                        <p>This page will grow as we add more and more components from Bootstrap...</p>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-12">
                        <h1>My first Bootstrap website!</h1>
                        <p>This page will grow as we add more and more components from Bootstrap...</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>

Answer 2

bootstrap.min.css包含以下内容：

.row {
margin-left: -15px;
margin-right: -15px;}

覆盖行类修复此问题，请参阅this小提琴

使用容器流体和使用引导程序的面板时行溢出

2 个答案: