无法在 html 中使用 .container-fluid

Question

伙计们。我是 bootstrap 的新手，如果这不是世界上最伟大的问题，请原谅我。我正在从事一个投资组合项目，并想使用 container-fluid class 让我的网站响应。我已经下载了用于 netbeans 的 bootstrap pallette 插件并进行了安装。然后我使用 link 访问 bootstrap。每当我使用容器流体 class 时，我的内容都不适合浏览器并且没有响应。任何帮助将不胜感激。这是我的代码。

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Sias</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="newcss.css" type="text/css"/>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>


    <body>
        <div class="container-fluid">
            <div class="main-banner">
            <img src="images/Yup.gif" alt=""/>
            </div>

            <main class="wrapper">
            <ul>
                <li><img src="images/Team.png" alt=""/></li>                
                <li><img src="images/Target.png" alt=""/></li>                
            </ul>            
            <ul>
                <li><img src="images/computer.png" alt=""/></li>                
                <li><img src="images/Bulb.png" alt=""/></li>                
            </ul>
            </main>
        </div>

Answer 1

我不完全确定您想要的布局，但这是一个使用 Bootstrap 列的示例：

<body>
        <div class="container-fluid">
            <div class="main-banner">
            <img src="Yup.gif" alt="yup"/>
            </div>

        <main class="wrapper">
        <ul>
          <div class="row">
            <div class="col-md-6">
            <li><img src="Team.png" alt="team"/></li>
          </div>
            <div class="col-md-6">
            <li><img src="Target.png" alt="target"/></li>
            </div>
          </div>
        </ul>
        <ul>
          <div class="row">
            <div class="col-md-6">
            <li><img src="computer.png" alt="computer"/></li>
              </div>
              <div class="col-md-6">
            <li><img src="Bulb.png" alt="bulb"/></li>
              </div>
          </div>
        </ul>
        </main>
    </div>

</body>

此外，将 new.css 放在 Bootstrap 之后。否则，Bootstrap 将覆盖 new.css - 可能不是您想要的。

Answer 2

I think you misunderstood how bootstrap elements work. Here are some quick tips.

.container 和 .container-fluid 都响应。这完全取决于它们对视口宽度的响应方式。 .container 适合浏览器，同时针对不同的屏幕尺寸具有固定的宽度，而 .container-fluid 会根据屏幕尺寸更改其宽度。但他们都有反应。
除非有重叠 css，否则 Bootstrap Css 应该可以正常工作。这意味着，内容确实适合浏览器。但这里的主要问题是：Which elements are needed to fit the browser。在您的情况下，这是模糊。您的 images 或 banner-container 有问题吗？
标记取决于您希望实现的布局。可能你应该知道，Bootstrap 是基于 12 column layout.你想要两张图片排成一排吗？然后在一行中使用两列。像这样:
```
<div class="row">
  <div class="col-md-6">
    <img src="Team.png" alt="team"/>
  </div>
  <div class="col-md-6">
    <img src="Target.png" alt="target"/>
  </div>
</div>
```
您希望您的图片符合 window 吗？然后在您的图片标签中使用 .col-sm-12 class。

<img src="Target.png" class="col-sm-12" alt="team"/>

如您所见，您甚至可以在 class 名称中阅读它。要不要向右拉一个div。然后使用：

<div class="pull-right">

All of the answers that are given before me are correct. Just try them and play with your code, and see how they fulfill your needs. But if you ask me, Read Bottstrap Css Reference first.

顺便说一句，如果您需要自定义 css 覆盖 Bootstrap，然后再调用它。

无法在 html 中使用 .container-fluid

Cannot use .container-fluid in html

html

css

jquery

twitter-bootstrap

responsive