Question

好吧所以即时尝试用内容填充其中的内容100％并且出于某种原因我每次都做宽度：100％的跨度它显示奇怪，它一直延伸到右边并且在它的左侧留下一个边距。我甚至不确定我是否应该使用span，但我猜是这样的。我试图让我的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％（整个屏幕）

Answer 1

如果您希望容器流体符合窗口大小，只需从.container-fluid删除填充：

.container-fluid {
  padding: 0;
}

还可以移除身体的填充以获得移动布局：

body {
  padding: 0;
}

您可以在此处查看工作示例：http://bootply.com/61164

Answer 2

尝试添加以下CSS：

html, body { margin: 0; padding: 0; }

Answer 3

您可以使用css删除边距。要删除左边距，您可以执行以下操作：

body { left-margin: 0; padding: 0; }

但是，由于<ul>标记，您获得了一些边距。要删除这些，您可以执行以下操作：

ul { margin:0; padding:0; }

如果您想将链接一直放到左侧，可以添加到<ul>标记的css：

list-style-type: none:

这会将链接一直移到左边，没有任何边距。但是，他也将删除子弹。子弹（或任何其他list-style-type）具有固有余量，因此您无法将其全部删除。

Answer 4

尝试使用.container-full或者如果您使用背景颜色，则使用容器 - 流体，因为通过填充创建了装订线，因此背景颜色或图像将跨越整个屏幕。

Answer 5

要在整个屏幕上实现100％，我将单词容器更改为信封并应用我想要的任何css .envelope。适合我。

如何在bootstrap中100％创建span12。我试图让所有东西100％的屏幕尺寸

5 个答案: