1. 首頁
  2. 問答
  3. 所有設備的自舉列布局

所有設備的自舉列布局

2015-07-05 55 views
0

我有一個關於自舉列布局的問題。是否有必要爲每個設備寬度指定列布局？例如，我想要了解一些細節，這些細節將佔據中心的一半。所以我做了一個包裝div與類col-*-6和col-*-offset-3（所以它將需要6列，並抵消它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

回答

2

LubošSuk，你好。

您的主要問題（需要所有類）...是的。
如果你想控制你怎麼想這是你需要使用的所有col-xx-xx類中的所有設備上查看...
或者選擇正確的單一類像我表現出在這裏爲你我的演示。
如果您使用col-xs-xx而不是col-md-xx這種方式也可以。

只有使用一個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

+0

只有一個小問題。所以如果我使用'col-sm- *'它也適用於所有更大的尺寸？我是否正確？ :) –

+1

你好，是的，你有這個權利。如果只使用'col-sm-xx'，它將向上運行sm。 – AngularJR

相關問題

 相關問題