所有设备的引导列布局

时间：2015-07-05 16:20:53

标签： android html css twitter-bootstrap

我对bootstrap列布局有疑问。是否有必要为每个设备宽度指定列布局？例如，我想要一些项目细节，它将占据中心的一半屏幕。所以我使用类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>

这是对的吗？是否有可能使其适用于所有设备而无需对每个设备进行编码？

1 个答案:

答案 0 :(得分：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>

相关问题
最新问题