Question

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

相反它看起来像这样：

enter image description here

这是我的代码：

<%@ 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跨度和行不起作用

2 个答案: