新网站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第一次使用，列将不会工作

回答

相关问题