Adr*_*der 4 css row width twitter-bootstrap
我有以下HTML:
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="STYLE.css">
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css">
</head>
<body>
<header class="row"></header>
<section class="row section1"></section>
<section class="row section2"></section>
<section class="row section1"></section>
<section class="row section2"></section>
<section class="row section1"></section>
<footer class="row"></footer>
</body>
</html>
由于某种原因,整个网页比浏览器窗口更宽.当我删除row课程时,一切都恢复正常.本地CSS文件与此问题无关.我的猜测是,bootstrap CSS会以某种方式修改行,使其更宽.所以我想问一下是否有人有任何想法可以解决这个问题.
您可以使用.container类或.container-fluid。.container保留了实际屏幕上的一些空白空间，并且不会拉伸页面视图。另一方面，.container-fluid会尽可能拉伸页面。请参阅下面修改的html脚本：
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="STYLE.css">
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<header class="row"></header>
<section class="row section1"></section>
<section class="row section2"></section>
<section class="row section1"></section>
<section class="row section2"></section>
<section class="row section1"></section>
<footer class="row"></footer>
</div>
</body>
</html>
同样，您必须使用.col-md-6之类的类来指定行中的节的宽度，其中md也可以由lg和sm替换。
md代表笔记本电脑，台式机等中型设备。
lg代表大型设备，例如投影仪或一些更大的屏幕等。
sm代表小型设备，例如手机等。
您可以自由使用这三个的组合。例如，
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-1 col-lg-12">
</div>
</div>
</div>
希望它可以帮助您入门并解决问题。
要解决此问题,您可以row正确使用类.
你没有用课包row上课container.
Bootstrap提供网格系统.
Bootstrap的网格系统允许整个页面最多12列.您需要将页面宽度排列为12列.
这里不可能解释所有这些.请参考以下链接.
| 归档时间： |
|
| 查看次数： |
25628 次 |
| 最近记录： |