文章/答案/技术大牛

发布

社区首页 >问答首页 >Twitter的引导3.x语义移动网格

问Twitter的引导3.x语义移动网格
EN

Stack Overflow用户

提问于 2013-06-25 20:42:01

回答 1查看 4.5K关注 0票数 9

在阅读了新的(未完成的) Bootstrap 3 docs之后，我想知道如何创建语义移动网格。

总之。如何转换这一点：

<div class="row">
  <div class="col col-lg-6 col-sm-6">6</div>
  <div class="col col-lg-6 col-sm-6">6</div>
</div>

为了做到这一点，并保存小型移动网格：

<div class="wrapper">
  <div class="left">6</div>
  <div class="right">6</div>
</div>

减

.wrapper {  .make-row(); }
.left    { .make-column(6); // this creates only large grid }
.right   { .make-column(6); }

twitter-bootstrap-3

twitter-bootstrap

less

回答 1

Stack Overflow用户

发布于 2013-09-06 23:17:51

第一部分：“咆哮”

我讨厌引导程序使用html div类作为HTML的表示层！我为你想要正确规划你的网站而鼓掌。

这让我想起了90年代和21世纪初，我们都在用桌子建网站.我们是在倒退吗？

<div class="col-6 col-lg-6 col-sm-6">6</div>
<div class="col-6 col-lg-6 col-sm-6">6</div>

<table><tr><td>6</td><td>6</td></tr></table>

我在等待谷歌对非语义标记施加惩罚的那一天。

第2部分:解决方案

不管怎样，把这个拉回到问题上.

对于引导3，据我所知，您不能使用.make-column(6)等.根据Bass Jobsen的答案，因为您需要指定窗口/屏幕的大小。lg / md / sm / xs

我就是这样做的..。

main.less

@import 'bootstrap.less';

.wrapper {
    .container;
    .make-row();
    .clearfix();
}

.content-main { // Change these for each window size
  .make-lg-column(6);
  .make-md-column(6);
  .make-sm-column(6);
  .make-xs-column(6);
}
.content-sidebar { // change these for each window size
  .make-lg-column(6);
  .make-md-column(6);
  .make-sm-column(6);
  .make-xs-column(6);
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="UTF-8">
    <style rel="stylesheet/less" src="less/main.less" />
    <script src="js/less-1.4.1.min.js" type="text/javascript"></script>

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>

    <script src="assets/js/html5shiv.js"></script>
    <script src="assets/js/respond.min.js"></script>
    <![endif]-->   
</head>
<body>
    <div class="wrapper">
        <div class="content-main">
            <div class="page-title">
                <!-- Page Title Stuff -->
            </div>
            <div class="page-content">
                <!-- Page Content Stuff -->
            </div>
        </div>
        <div class="content-sidebar"><!-- Page Footer Stuff --></div>
    </div>  
</body>

less.js
download Bootstrap

票数 11

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

原文链接：

https://stackoverflow.com/questions/17307137

复制

相似问题

问Twitter的引导3.x语义移动网格
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Twitter的引导3.x语义移动网格EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Twitter的引导3.x语义移动网格
EN