无法在HTML中使用.Container-Fluid

伙计们。如果这不是世界上最伟大的问题，我是新手Bootstrap，请原谅我。我正在从事一个投资组合项目，并希望使用容器流体类来使我的网站响应迅速。我已经为Netbeans下载了Bootstrap Pallette插件，并安装了它。然后，我使用链接来访问引导程序。每当我使用容器流体类时，我的内容都不适合浏览器，并且响应不足。任何帮助将不胜感激。这是我的代码。

<!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>

我认为您误解了Bootstrap元素的工作原理。这是一些快速提示。

.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>
```
您是否希望您的图像适合窗口？然后在图像标签中使用.col-sm-12类。

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

如您所见，您甚至可以在类名称中读取它。您想向右拉一个div吗？然后使用：

<div class="pull-right">

在我面前给出的所有答案都是正确的。只需尝试它们并使用您的代码，然后看看它们如何满足您的需求即可。但是，如果您问我，请首先阅读Bottstrap CSS参考。

顺便说一句，如果您需要自定义CSS覆盖引导程序，然后将其拨打。

我不完全确定您想要的布局，但这是使用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-可能不是您想要的。

相关内容

最新更新

热门标签：