新網站bootstrap第一次使用，列將不會工作

我開始學習Bootstrap和PSD.Now.I後，我的標題和段落在我的標題不堆疊到左側屏幕相同。我只使用了一個Bootstrap行。現在，每當我在不同的行上添加新內容時，我需要使用一個新行？例如，如果我爲一個項目使用col-md-12，然後我使用col-md-4作爲另一個項目，而在同一行中，它不會自動創建另一個項目？新網站bootstrap第一次使用，列將不會工作

header .row div #main_image { 
 
    position: absolute; 
 
    width: 100%; 
 
    left: 0; 
 
    z-index: -1; } 
 
header .row div #logo { 
 
    margin-top: 40%; 
 
    margin-left: 100%; 
 
    z-index: 1; } 
 
header .row div h1 { 
 
    margin-top: 50%; 
 
    font-family: "Open Sans", sans-serif; 
 
    color: #fff; 
 
    font-size: 4vmax; 
 
    width: 80%; } 
 
header .row div p { 
 
    margin-top: 5%; 
 
    color: #fff; 
 
    font-family: "Open Sans", sans-serif; 
 
    width: 80%; 
 
    font-size: 0.9vw; }

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <link href="sass/style.css" rel="stylesheet"> 
 
    <link href="css/normalize.css" rel="stylesheet"> 
 
    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
 
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 

 
<body> 
 
<header> 
 
    <div class="container-fluid"> 
 
     <div class="row"> 
 
      <div class="col-xs-12"> 
 
       <img src="images/Main.png" alt="Main Image" id="main_image"> 
 
      </div> 
 
      <div class="col-xs-2"> 
 
       <img src="images/Logo.png" alt="Logo" id="logo"> 
 
      </div> 
 
      <div class="col-xs-6 col-sm-6 col-md-6 col-lg-8"> 
 
       <h1> Picture perfect</h1> 
 
      </div> 
 
      <div class="hidden-xs col-sm-6 col-md-6 col-lg-6"> 
 
       <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</header> 
 
</body>

來源

2016-09-05 Daniel

頭.row格#main_image { 的位置是：絕對的; 寬度：100％; left：0; z-index：-1; } header .row div #logo {margin：{margin：margin：40％;}} margin-left：100％; z-index：1; } header.row div h1 {margin：margin：50％;}}。 font-family：「Open Sans」，sans-serif; color：#fff; font-size：4vmax; 寬度：80％; header .row div p {margin_top：5％; margin-top：5％;} 。 color：#fff; font-family：「Open Sans」，sans-serif; 寬度：80％; font-size：0.9vw; } – Daniel

現在，我需要每次都使用新行，當我在不同線路上增加新的內容？

是的。 Bootstrap使用行來定位自己，以便按行限制內容。

例如，如果我使用col-md-12作爲一個項目，然後我使用col-md-4作爲另一個項目，而在同一行中，它不會自動創建另一行？

不需要。您必須自己計算每行（行）12列的限制。達到12列限制後，您的佈局將中斷

如果您想要有更多的列，則需要藉助Bootstrap Less變量（see here）定義自定義響應網格。

你主要需要更改這些變量：

@grid-columns: Number of columns in the grid. 

@grid-gutter-width Padding between columns. Gets divided in half for the left and right.

來源

2016-09-05 19:35:15

新網站bootstrap第一次使用，列將不會工作

回答

相關問題