2

好的，所以我试图让一个包含内容的跨度 100% 穿过屏幕，出于某种原因，每次我在跨度上执行 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 流体不会一直穿过屏幕，它在跨度的左侧和右侧有大约 20 像素左右的边距。我希望 span12（灰色框）的宽度为 100% 穿过整个屏幕。

我试过 html, body { margin: 0; 填充：0；并且它不起作用 span12 仍然有边距而不是 100%（整个屏幕）

4

5 回答 5

1

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

.container-fluid {
  padding: 0;
}

并从 body 中删除移动布局的填充：

body {
  padding: 0;
}

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

于 2013-05-12T10:32:37.330 回答
0

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

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

但是，由于<ul>标签，您会获得一些利润。要删除这些，您可以执行以下操作：

ul { margin:0; padding:0; }

如果要将链接一直放在左侧，可以添加到<ul>标签的 css 中：

list-style-type: none:

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

于 2013-05-12T09:05:00.697 回答
0

尝试使用 .container-full 或者如果您使用背景颜色，则使用 container-fluid，因为排水沟是通过填充创建的，因此背景颜色或图像将跨越全屏。

于 2014-02-20T11:27:52.953 回答
0

尝试添加以下 CSS：

html, body { margin: 0; padding: 0; }
于 2013-05-12T08:53:47.223 回答
-1

为了在屏幕上实现 100%，我将单词容器更改为信封并将任何我想要的 css 应用到 .envelope。为我工作。

于 2015-07-06T23:15:15.063 回答