android - 所有设备的 Bootstrap 列布局

标签 android html css twitter-bootstrap

我对 Bootstrap 列布局有疑问。是否需要为每个设备宽度指定列布局？例如，我想要一些元素细节，它将占据屏幕中央的一半。所以我用类 col-*-6 和 col-*-offset-3 做了一个包装器 div (所以它需要六列和将其偏移 3 列)。

然后，在这个元素中，我将有一个 child ，他们将占用 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>

这是正确的吗？是否可以在不对每个设备进行编码的情况下使其适用于所有设备？

最佳答案

Luboš Suk，您好。

你的主要问题(需要所有类(class))...是的。
如果您想控制在所有设备上的查看方式，您需要使用所有 col-xx-xx类(class)...
或者选择正确的单一类，就像我在此处的演示中为您展示的那样。
如果你使用 col-xs-xx而不是 col-md-xx这种方式也可以。

您选择的红色和灰色 block 仅使用一个 col-md-xx类不会像你想要的那样工作，因为两者并排。

您会看到红色和灰色 block 仅使用您的 col-md-xx他们都松散了他们需要的地方。他们开始堆叠。

将主 block 放在中间的方法是正确的......但是...... 当您使用 col-xx-offset-x并且您希望/需要 div block 在小型设备上全屏显示，您必须在此 View 中将此类归零。

演示中的第二个 block 显示了何时可以控制Offset 以达到全宽。

如果您想对 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>

关于android - 所有设备的 Bootstrap 列布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31232434/

上一篇：html - CSS 菜单有问题

下一篇：javascript - 制作固定的右侧导航栏

相关文章：

Android Ndk - 设置 C++ 线程的名称

android - 设置Android DatePicker标题语言

html - 样式化 div 悬停 Action 不移动其他元素

css - Bootstrap 4 导航栏有 2 行

JavaScript 函数只影响带有类的第一个 div

javascript - 避免在 Firefox(JavaScript？)中的 <tr> 元素中分页

android - Activity 切换时意外的短暂方向变化

android - 尝试通过在 android 中使用 Google Maps Android API v2 来显示 StreetView 但无法使其正常工作

javascript - 以水平对齐方式显示表格数据

html - 父元素布局 w.r.t.旋转元素的边界框

©2024 IT工具网  联系我们