Bootstrap 跨度和行不起作用

Question

我尝试使用 bootsrap，但它不影响我的布局。我希望布局是这样的（颜色和方框有助于让您了解文本在屏幕上的位置）：

相反，它看起来像这样：

这是我的代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
    href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="../css/top.css">
<link
    href='http://fonts.googleapis.com/css?family=Shadows+Into+Light|Gloria+Hallelujah|Architects+Daughter'
    rel='stylesheet' type='text/css'>
<title>Top</title>
</head>

<body>
    <div class="container">
        <div class="row-fluid">
            <div class="span12">
                Fluid 12
                <div class="row-fluid">
                    <div class="span6">
                        Fluid 6
                        <div class="row-fluid">
                            <div class="span6">Fluid 6</div>
                            <div class="span6">Fluid 6</div>
                        </div>
                    </div>
                    <div class="span6">Fluid 6</div>
                </div>
            </div>
        </div>



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

Answer 1

span 和 row-fluid 在 bootstrap 3 之后被弃用。

只需使用 container-fluid 并保留 row div 而不是 row-fluid 并使用 col-xs 而不是 span，如下所示：

<div class="container-fluid">
  <div class="row">
      <div class="col-xs-12">....</div>
      <div class="col-xs-6">....</div>
  </div>
</div>

Answer 2

我建议您查看此处的文档：http://getbootstrap.com/css/#grid

如下所述，版本已更改，但对于您正在寻找的布局，我会使用类似这样的内容（当您运行代码段时单击整页）：

.container {
  text-align: center;
}
.col-md-6, .col-md-12, .col-md-3 {
    background-color:grey;
  margin:5px 0;
  border-radius:3px;
  }

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="col-md-12">
      12
    </div>
  </div>
  <div class="row">
    <div class="col-md-6">
      6

    </div>
    <div class="col-md-6">
      6
    </div>
  </div>
  <div class="row">
    <div class="col-md-3">
      3
      </div>
    <div class="col-md-3">
      3
      </div>
  </div>
</div>

还有一些非常有用的示例！

Bootstrap 跨度和行不起作用

Bootrsap span and row doesn't work

html

jsp

twitter-bootstrap

twitter-bootstrap-3