Jquery 无法在html中使用.container流体_Jquery_Html_Css_Twitter Bootstrap_Responsive

Jquery 无法在html中使用.container流体

jquery html css twitter-bootstrap

Jquery 无法在html中使用.container流体,jquery,html,css,twitter-bootstrap,responsive,Jquery,Html,Css,Twitter Bootstrap,Responsive,伙计们。我是新手，所以如果这不是世界上最大的问题，请原谅我。我正在从事一个投资组合项目，并希望使用容器流体类，使我的网站响应。我已经下载了netbeans的引导Pallete插件并安装了它。然后我使用链接访问引导。每当我使用container fluid类时，我的内容都无法正确安装浏览器，并且没有响应能力。任何帮助都将不胜感激。这是我的密码 <!DOCTYPE html> <html lang="en"> <head> <titl

伙计们。我是新手，所以如果这不是世界上最大的问题，请原谅我。我正在从事一个投资组合项目，并希望使用容器流体类，使我的网站响应。我已经下载了netbeans的引导Pallete插件并安装了它。然后我使用链接访问引导。每当我使用container fluid类时，我的内容都无法正确安装浏览器，并且没有响应能力。任何帮助都将不胜感激。这是我的密码

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


西亚斯

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

<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。否则，引导将覆盖new.css-可能不是您想要的。

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

<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。否则，引导将覆盖new.css-可能不是您想要的

我认为您误解了引导元素的工作原理。这里有一些快速提示

.container

和

.container fluid

都有响应。这完全取决于它们对视口宽度的响应方式。虽然.container适合浏览器，但对不同的屏幕大小有固定的宽度，.container fluid会根据屏幕大小更改其宽度。但他们都反应灵敏。

除非有重叠的css，

引导css

应该可以正常工作。这意味着，内容确实适合浏览器。但这里的主要问题是：

需要哪些元素来适应浏览器

。在您的情况下，这是模糊的。您的

图像

或

横幅容器

是否有问题

标记取决于您希望实现的布局。很可能您应该知道，Bootstrap是基于

12列布局的。

您希望一行中有两个图像吗？然后在一行中使用两列。像这样：

<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

类

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

在我面前给出的所有答案都是正确的。只需尝试它们并使用您的代码，看看它们如何满足您的需求。但如果你问我，先读一读

顺便说一句，如果您需要自定义css覆盖引导，请稍后调用。