Первое использование начальной загрузки сайта, столбцы не будут работать одинаково

Я начал изучать Bootstrap и сделать сайт после PSD.Now.I этот заголовок и абзац в моем заголовке, который не складывается в левую часть экран тот же. Я использовал только одну строку Bootstrap. Теперь мне нужно использовать новую строку каждый раз, когда я добавляю новое содержимое в разные строки? Например, если я использую: col-md-12 для элемента, а затем я использую col-md-4 для другого элемента, а в той же строке он автоматически не создаст другую строку?Первое использование начальной загрузки сайта, столбцы не будут работать одинаково

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%; Слева: 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; цвет: #fff; размер шрифта: 4vmax; ширина: 80%; } header .row div p { margin-top: 5%; цвет: #fff; font-family: «Open Sans», sans-serif; ширина: 80%; Размер шрифта: 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

Первое использование начальной загрузки сайта, столбцы не будут работать одинаково

ответ

Смежные вопросы