Question

我正在做一个网站，我首先从移动样式表开始。但是容器流体的宽度与窗口的宽度不同。

我试图解决的问题是：

 .container-fluid{
      width: 105%
 }

现在的问题是，当我把窗口缩小一点时，它仍然不够，但是当我把窗口放大一点时，它太多了，当我这样做时，底部会出现一个滚动条。< / p>

100％不起作用，因为我已经说过它不是窗口的全宽。

以下是HTML文件中的整个正文：

<body>
<!-- Introduction -->

<div id="introduction" class="container-fluid">
    <div class="row">
        <header>
            <h1> Mosescu Bogdan Gabriel </h1>
            <img id="profilepic" src="profilepic.png" />
            <h2> Web Designer | Motion Graphics Artist </h2>
        </header>
    </div>
</div>
<!-- //Introduction// -->

<div id="about" class="container-fluid">
    <div class="row">
        <h1 id="about-title"> Who I am </h1>
    </div>
</div>
</body>

这是CSS文件：

/*Introduction CSS */
#introduction{
background-color: #542437;
color: white;
margin-top: -21px;
}
#introduction header{
text-align: center;
}
#introduction header h1{
font-family: montserrat;
font-weight: bold;
}
#introduction header h2{
font-family: montserrat;
font-weight: normal;
font-size: 1em;
}
#profilepic{
border-radius: 100%;
width: 150px;
height: 150px;
}
/* //Introduction CSS// */


/* About CSS */
#about{
background-color: #f2f2f2;
color: #1a1a1a;
text-align: center;
margin-top: -24px;
}
#about-title{
font-family: montserrat;
font-weight: bold;
font-size: 2.25em;
border-bottom: solid 1px black;
}

Answer 1

Bootstrap容器已填充。

 .container-fluid {
    padding-right:15px;
    padding-left:15px;
    margin-right:auto;
    margin-left:auto
 }

您需要删除填充。

.container-fluid {
    padding-right:0;
    padding-left:0;
    margin-right:auto;
    margin-left:auto
 }

编辑：这是一个简单的例子。如果您复制并粘贴到新的.html文档中，您将看到容器上没有填充。如果您删除了container-fluid覆盖，则会看到填充。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

        <!-- put your override styles here - AFTER you include Bootstrap -->
        <link href="style-mobile.css" rel="stylesheet">

    </head>
    <style>
        /* override Bootstrap's container */
        .container-fluid {
            padding-right:0;
            padding-left:0;
            margin-right:auto;
            margin-left:auto
         }
    </style>
    <body>

        <div class="container-fluid">
            This text hits the left side of the viewport.
        </div>

    </body>
</html>

编辑HTML示例以包含新的CSS链接

Answer 2

尝试此操作，使用引导程序container-fluid将row内的所有内容包装起来。它应该工作，谢谢。

<div id="introduction" class="container-fluid">
  <div class="row">
    <header>
      <h1> Mosescu Bogdan Gabriel </h1>
      <img id="profilepic" src="profilepic.png" />
      <h2> Web Designer | Motion Graphics Artist </h2>
    </header>
  </div>

</div>

<div id="about" class="container-fluid">
  <div class="row">
    <h1 id="about-title"> Who I am </h1>
  </div>
</div>

Answer 3

如果您只是更改.container-fluid将无效，因为容器内的行和col都会得到自己的更正。尝试在容器流体中添加全宽，然后添加：

.full-width { padding-left: 0; padding-right: 0; }
.full-width .row { margin-right: 0; margin-left: 0; }
.full-width .col-md-12 { padding-left: 0; padding-right: 0; }

Answer 4

我非常肯定Nenad Vracar http://prnt.sc/cb20cy

Answer 5

使用Bootstrap 4：

<div class="container-fluid p-0"> 

  <div class="row m-auto">

    your content here

  </div>

</div>

Answer 6

经过长时间的搜索并尝试了到底对我做了什么，结果是在“ col-xs-12” div标签中出现了“ w-100”。

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12 w-100">
      My content that did not span 100% now with w-100 it does
    </div>
  </div>
</div>

Answer 7

<div className="container-fluid p-0 m-0 row justify-content-center" >

如果您使用引导程序，则可以使用p-0和m-0，它们会将.container-fluid的15px填充和.row的-15px边距设置为0。

Answer 8

我想有很多方法可以做到这一点。在Bootstrap 4中，您所要做的就是将容器包装在具有Class = Row

的Div中

<div class="Row">
   <header class="container-fluid">
     <nav class="navbar navbar-dark bg-secondary">
      <h1 class="navbar-brand">Try this out</h1>
     </nav>    
   <header>
</div>

Answer 9

在尝试了大多数这些答案之后，这是我唯一可以开始工作的事情。

CSS：

#mydiv {
  margin: 0 -9999rem;
  padding: 0.25rem 9999rem;
  background-color:#2A2A52
}

html：

<div class="container-fluid px-0">
    <div id="mydiv">
        <div class="row">
            <div class="col-md-12">
                 <p>YOUR CONTENT HERE</p>
              </div>
         </div>
     </div>
</div>

注意：我需要在容器上指定 px-0 并将行包装在单独的 div 中，以便文本与页面上的附加文本水平对齐，该文本是典型容器流体 div 的一部分。< /p>

Answer 10

如果这一切都无效，请尝试：

*{margin:0;padding:0}

删除可能与代码重叠的填充/边距。它对我有用，因为添加一行包装容器 - 流体在我的页面上创建了一个水平滚动。

Bootstrap container-fluid不是屏幕的整个宽度

10 个答案: