文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >所有设备的引导列布局

问所有设备的引导列布局
EN

Stack Overflow用户
提问于 2015-07-05 16:20:52
回答 1查看 2.2K关注 0票数 0

我有一个关于引导列布局的问题。是否需要为每个设备宽度指定列布局？例如，我希望有一些项目的细节，这将占用一半的屏幕在中心。因此，我用类col-*-6和col-*-offset-3做了一个包装器col-*-offset-3(因此它将包含6列并偏移它3列)。

然后，在这个元素中，我将有一个子元素，它将包含3列，另一列将用9来填充容器的全部宽度。

代码语言：javascript
复制
<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>

这是正确的吗？它是否有可能使它工作在所有的设备，而不编码他们每一个？

android
html
css
twitter-bootstrap
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-07-05 23:14:54

LubošSuk，你好。

你的主要问题(需要所有课程).是的。

如果您想要控制如何在所有设备上查看此文件，则需要使用所有col-xx-xx类.

或选择正确的单个类，就像我在这里为您展示的演示中显示的那样。

如果您使用col-xs-xx而不是col-md-xx，这种方式也可以工作。

您只使用一个col-md-xx类的红色和灰色块选项也不会像您想要的那样工作，因为两者都会并排呆在一起。

您将看到红色和灰色块只使用您的col-md-xx和他们都松散的地方，他们需要。他们开始使用Stack。

把主块放在中间的方法是right....But.当您使用col-xx-offset-x，并且希望/需要div块在一个小型设备上全屏运行时，您必须在这个视图中对这个类进行零点。

演示中的第二个块显示了何时可以控制偏移量以达到完全宽度。

如果您希望更多地控制row width，请查看本演示中的底部选项。

这是小提琴。

​

​

​

代码语言：javascript
复制
<!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>

​

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/31232434

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档