twitter-bootstrap - 如何在 Bootstrap 中使 span12 100%。我试图让所有内容都达到屏幕大小的 100%

标签 twitter-bootstrap width screen html

好的,所以我正在尝试使其中包含内容的 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/

相关文章:

android - 视口(viewport)宽度不适用于 Android

html - IE 中的 CSS inline-block 和 width-auto 不正确

css - HTML/CSS 之谜?不知道在哪里调出尺寸

android - 在安卓中使用 ListView

html - 如何在 Bootstrap 导航栏下拉菜单中添加右上箭头

javascript - Play Framework : Missing semicolon error in jQuery/Bootstrap JS

delphi - 如何根据屏幕上的 X、Y 坐标返回颜色?

java - 相对布局 android Loopable

javascript - 你如何为桌面而不是移动设备制作 bootstrap nav 顶级按钮可点击链接?

css - 在 Bootstrap 中使用 RTL 布局时,Asp.net 文本框光标令人困惑