好的,所以我正在尝试使其中包含内容的 span 100% 穿过屏幕,出于某种原因,每次我在 span 上执行 width:100% 时,它都显得很奇怪,它一直向右延伸并且在它的左边留一个边距。我什至不确定我是否应该为此使用跨度,但我猜是这样。我试图让我的 span12 占据 100% 的屏幕。
我的代码看起来很基础:
<div class="row-fluid">
<div class="span12">
<ul class="inline">
<li><a href="#">Link1</a></li>
<li><a href="#">Link1</a></li>
<li><a href="#">Link1</a></li>
<li><a href="#">Link1</a></li>
</ul>
</div>
</div>
如您所知,span12 并没有完全占据 100%,它在两侧留下了大约 20px 左右的边距。
更新:
好的,如果你这样做:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Untitled</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<style type="text/css">
.span12 {
background:#999;
padding:20px 0px;
}
/*THIS IS A GREY BOX THAT GOES ACROSS THE ENTIRE SCREEN end*/
</style>
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<p>THIS IS THE GREY BOX CONTENT THAT I WANT GOING ACROSS THE ENTIRE SCREEN 1OO% WITH NO MARGIN THATS THE SPAN12 HAS ON THE SIDES</p>
</div><!--span12 END-->
</div><!--row END-->
</div><!--container END-->
</body>
您将有一个灰色框穿过屏幕,正如您所知,span12 流体不会一直穿过屏幕,它在跨度的左右两侧有大约 20px 左右的边距。我希望 span12(灰色框)在整个屏幕上具有 100% 的宽度。
我试过 html, body { margin: 0;填充:0; } 它不起作用 span12 仍然有边距而不是 100%(整个屏幕)
最佳答案
如果您希望容器流体适合窗口大小,只需从 .container-fluid
中删除填充:
.container-fluid {
padding: 0;
}
并且还从移动布局的正文中删除填充:
body {
padding: 0;
}
您可以在此处查看工作示例:http://bootply.com/61164
关于twitter-bootstrap - 如何在 Bootstrap 中使 span12 100%。我试图让所有内容都达到屏幕大小的 100%,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16505174/