不能在html

傢伙中使用.container-fluid。如果這不是世界上最大的問題，我是新手，所以原諒我。我正在開發一個投資組合項目，並希望使用容器流體類來使我的網站響應。我已經下載netbeans的bootstrap pallette插件並安裝它。然後我使用鏈接訪問引導程序。每當我使用容器流體類時，我的內容都不能正確適應瀏覽器，並且不能響應。任何幫助將不勝感激。這是我的代碼。不能在html

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

來源

2017-05-05 Isaiah Sias

你仍然需要在Bootstrap中的行和列，在容器流體內部 – andi

我想你誤解了bootstrap元素是如何工作的。這裏有一些快速提示。

.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 Reference。

順便說一句，如果你需要你的自定義CSS覆蓋Bootstrap的，然後調用它。

來源

2017-05-05 22:28:06

非常感謝你們！ –

我不完全相信你想要的佈局，但這是使用自舉列了一個例子：

<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會覆蓋new.css - 可能不是你想要的。

來源

2017-05-05 21:02:59

這應該是一個評論，而不是一個答案。 – Blazemonger

@Blazemonger我只是剛剛纔瞭解到我有權發表評論！ –

回答

相關問題