Разметка столбца начальной загрузки для всех устройств

У меня есть вопрос о компоновке столбца бутстрапа. Нужно ли указывать расположение столбцов для каждой ширины устройства? Например, я хотел бы иметь детальную информацию, которая займет половину экрана в центре. Поэтому я сделал обертку div с классами col-*-6 и col-*-offset-3 (так что это займет шесть столбцов и смещение 3 столбцов).Разметка столбца начальной загрузки для всех устройств

Тогда в этом элементе у меня будут дети, которые возьмут 3 столбца и один, который займет 9, чтобы заполнить всю ширину контейнера.

<div class="col-md-6 col-md-offset-3 toppad"> 
    <table> 
    <tr><td class="col-md-3">Project ID:</td><td class="col-md-9">{$project['name']}</td></tr> 
    </table> 
</div>

Это правильно? И можно ли заставить его работать на всех устройствах без кодирования каждого из них?

источник

2015-07-05 Luboš Suk

Luboš Suk, привет там.

Ваш главный вопрос (нужны все классы) ... Да.
Если вы хотите, чтобы контролировать то, как вы хотите, чтобы это было просматривать на всех устройствах, которые вы должны использовать все col-xx-xx классы ...
Или выбрать правильный один класс, как я показываю в моей демо здесь для вас.
Если вы используете col-xs-xx, а не col-md-xx этот способ может работать.

Ваш вариант блоков Red и Grey только с использованием одного класса col-md-xx не будет работать так, как вы этого хотите, так как вы остаетесь бок о бок.

Вы увидите, что блоки Красный и Серый используют только ваш col-md-xx, и они оба освобождаются там, где им нужно. Они начинаются с Стек.

Способ размещения основного блока в середине правильный .... Но .... Когда вы используете col-xx-offset-x, и вы хотите/нужен блок div, чтобы перейти в полноэкранный режим на маленьком устройстве, которое вам нужно нуль этого класса на этом представлении.

Второй блок в демонстрации показывает, когда вы можете управлять Смещение, чтобы перейти в полную ширину.

Если вы хотите немного больше контролировать rowширина посмотрите на нижнюю опцию в этой демонстрации.

Вот Fiddle.

enter image description here

<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    
 
    <meta name="description" content=""> 
 
    <meta name="author" content=""> 
 
    <link rel="icon" href="../../favicon.ico"> 
 

 
    <title>Starter Template for Bootstrap</title> 
 

 
    <!-- Bootstrap core CSS --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
 

 
<style> 
 
body { 
 
    padding-top: 50px; 
 
} 
 
.spacer { 
 
    margin-top: 2%; 
 
    margin-bottom: 2%; 
 
} 
 
.glyph-text { 
 
    color: darkorange; 
 
    font-size: 1.3em; 
 
} 
 
.block { 
 
    min-height: 200px; 
 
    background-color: darkorange; 
 
} 
 
.block1 { 
 
    min-height: 50px; 
 
    background-color: darkorange; 
 
}  
 
.block2 { 
 
    color: #fff; 
 
    min-height: 40px; 
 
    margin-top: 2%; 
 
    margin-bottom: 2%; 
 
    background-color: blueviolet; 
 
} 
 
.block3 { 
 
    min-height: 40px; 
 
    margin-top: 2%; 
 
    margin-bottom: 2%; 
 
    background-color: steelblue; 
 
} 
 
.block-a { 
 
    color: #fff; 
 
    height: 40px; 
 
    margin-top: 2%; 
 
    margin-bottom: 2%; 
 
    background-color: red; 
 
} 
 
.block-b { 
 
    color: #fff; 
 
    height: 40px; 
 
    margin-top: 2%; 
 
    margin-bottom: 2%; 
 
    background-color: grey; 
 
}  
 
.center { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    margin: auto; 
 
} 
 
.center-row { 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    margin: auto; 
 
}  
 
</style> 
 

 
</head> 
 

 
<body> 
 

 
<nav class="navbar navbar-inverse navbar-fixed-top "> 
 
    <div class="container"> 
 
     <div class="navbar-header"> 
 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
 
       <span class="sr-only">Toggle navigation</span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
      </button> 
 
      <a class="navbar-brand " href="#">Project name</a> 
 
     </div> 
 
     <div id="navbar" class="collapse navbar-collapse"> 
 
      <ul class="nav navbar-nav navbar-right"> 
 
       <li class="active"><a href="#">Home</a></li> 
 
       <li><a href="#about">About</a></li> 
 
       <li><a href="#contact">Contact</a></li> 
 
      </ul> 
 
     </div><!--/.nav-collapse --> 
 
    </div> 
 
</nav> 
 

 
    
 
<div class="container col-lg-12"> 
 
    <div class="text-center"> 
 
     <h3>The RED and GREY blocks only use the one col-md-xx class.</h3> 
 
    </div> 
 
    <div class="row col-md-6 col-md-offset-3 block"> 
 
     
 
     <div class="col-md-9 block-a"> 
 
      col-md-9 
 
      <p class="text-center"> 
 
       <span class="glyphicon glyphicon-remove"></span> 
 
      </p> 
 
     </div> 
 
     <div class="col-md-3 block-b"> 
 
      col-md-3 
 
      <p class="text-center"> 
 
       <span class="glyphicon glyphicon-remove"></span> 
 
      </p> 
 
     </div> 
 
     
 
     <div class="col-xs-9 col-sm-9 col-md-9 col-lg-9 block2"> 
 
      col-ALL-9 
 
      <p class="text-center"> 
 
       <span class="glyphicon glyphicon-ok glyph-text"></span> 
 
      </p> 
 
     </div> 
 
     <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 block3"> 
 
      col-ALL-3 
 
      <p class="text-center"> 
 
       <span class="glyphicon glyphicon-ok glyph-text"></span> 
 
      </p> 
 
     </div> 
 
     
 
     <div class="col-xs-9 block2"> 
 
      col-xs-9 
 
      <p class="text-center"> 
 
       <span class="glyphicon glyphicon-ok glyph-text"></span> 
 
      </p> 
 
     </div> 
 
     <div class="col-xs-3 block3"> 
 
      col-xs-3 
 
      <p class="text-center"> 
 
       <span class="glyphicon glyphicon-ok glyph-text"></span> 
 
      </p> 
 
     </div> 
 
     <div class="text-center"> 
 
      row col-md-6 col-md-offset-3 
 
     </div> 
 
    </div> 
 
      
 
</div><!-- /.container --> 
 
    
 
    
 
<div class="container col-lg-12 spacer"></div>  
 
    
 

 
    
 
<div class="container col-lg-12"> 
 

 
<div class="row col-xs-12 col-xs-offset-0 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3 block1"> 
 
       
 
    <div class="col-xs-9 col-sm-9 col-md-9 col-lg-9 block2"> 
 
     col-ALL-9 
 
     <p class="text-center"> 
 
      <span class="glyphicon glyphicon-ok glyph-text"></span> 
 
     </p> 
 
    </div> 
 
    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 block3"> 
 
     col-ALL-3 
 
     <p class="text-center"> 
 
      <span class="glyphicon glyphicon-ok glyph-text"></span> 
 
     </p> 
 
    </div> 
 
    
 
    <div class="col-xs-9 block2"> 
 
     col-xs-9 
 
     <p class="text-center"> 
 
      <span class="glyphicon glyphicon-ok glyph-text"></span> 
 
     </p> 
 
    </div> 
 
    <div class="col-xs-3 block3"> 
 
     col-xs-3 
 
     <p class="text-center"> 
 
      <span class="glyphicon glyphicon-ok glyph-text"></span> 
 
     </p> 
 
    </div> 
 
    <div class="text-center"> 
 
     row col-xs-12 col-xs-offset-0 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3 
 
    </div> 
 
    </div> 
 
      
 
</div><!-- /.container -->  
 
    
 
    
 
<div class="container col-lg-12 spacer"></div> 
 
    
 
     
 
<div class="container col-lg-12"> 
 

 
    <div class="row col-xs-11 col-sm-9 col-md-7 col-lg-5 block center-row"> 
 
     
 
     <div class="col-xs-9 col-sm-9 col-md-9 col-lg-9 block2"> 
 
      col-ALL-9 
 
     </div> 
 
     <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 block3"> 
 
      col-ALL-3 
 
     </div> 
 
     
 
     <div class="col-xs-9 block2"> 
 
      col-xs-9 
 
     </div> 
 
     <div class="col-xs-3 block3"> 
 
      col-xs-3 
 
     </div> 
 
     
 
     <div class="text-center"> 
 
      row col-xs-11 col-sm-9 col-md-7 col-lg-5 
 
      <p>The row is not using any OFFSET.</p> 
 
      <p>The row is centered, using custom css.</p> 
 
     </div>  
 
    </div> 
 
      
 
</div><!-- /.container --> 
 

 

 
    <!-- Bootstrap core JavaScript --> 
 
    <!-- Placed at the end of the document so the pages load faster --> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
 
    
 
</body> 
 
</html>

источник

2015-07-05 23:14:54 AngularJR

только один маленький вопрос. Поэтому, если я использую 'col-sm- *', он также будет применяться ко всем более крупным размерам? Я правильно понял? :) –

Привет, Да, у вас есть это право. Если вы используете только 'col-sm-xx', он будет работать для sm вверх. – AngularJR

Разметка столбца начальной загрузки для всех устройств

ответ

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