Question

我想有一个3列布局，从语义上来说，我的标记从内容的角度来看是有道理的：

<!-- 1. main-->
<div>
  <div class="product"></div>
  <div class="product"></div>
  <div class="product"></div>
  <div class="product"></div>
</div>
<!-- 2. side bar -->
<div>
</div>
<!-- 3. other info -->
<div>
</div>

我希望设置主列的下方布局，其中包含产品的子2列布局，侧边栏以及页面底部的其他div：

layout

我创建了一些引导代码，并提出以下问题：

当下面的代码运行时，为什么最后的other div偏向左边，我该如何解决？
理想情况下我想保持html尽可能干净（不添加任意行/列）但是最简洁的方法是将产品divs并排放置2个宽度（每个宽度相等），然后折叠在顶部当浏览器宽度减少时彼此相关？

代码低于

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>Untitled 1</title>
    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="IE=9" />
    <style type="text/css">

    div {
    border: 1px solid blue;
    }

    </style>
</head>

<body>
    <div class='container'>
        <h1></h1>
        <div class='navbar navbar-inverse'>
          <div class='navbar-inner nav-collapse' style="height: auto;">
            <ul class="nav">
            </ul>
          </div>
        </div>
        <div id='content' class='row-fluid'>
            <div id='main' class='span9'>
                <h2>Main</h2>
                <div class="product">
                    <p>Item 1</p>
                </div>
                <div class="product">
                    <p>Item 2</p>
                </div>
                <div class="product">
                    <p>Item 3</p>
                </div>
                <div class="product">
                    <p>Item 4</p>
                </div>
            </div>
            <div id='sidebar' class='span3'>
                <h2>Side</h2>
            </div>
            <div id='other' class="row">
                <div class="span12">
                    <p>other details here</p>
                </div>
            </div>
        </div>
  </div>
</body>

</html>

Answer 1

检查http://www.bootply.com/64966是否接近你所追求的目标。我将每对产品div放在嵌套行（more about fluid nesting here）中。

祝你好运！

<div class="container">
    <h1></h1>
    <div class="navbar navbar-inverse">
      <div class="navbar-inner nav-collapse" style="height: auto;">
        <ul class="nav">
        </ul>
      </div>
    </div>
    <div id="content" class="row-fluid">
        <div id="main" class="span9">
            <h2>Main</h2>
          <div class="row-fluid"> <!-- start nested row -->
            <div class="product span6">
                <p>Item 1</p>
            </div>
            <div class="product span6">
                <p>Item 2</p>
            </div>
          </div> <!-- end nested row -->

          <div class="row-fluid"> <!-- start nested row -->
            <div class="product span6">
                <p>Item 3</p>
            </div>
            <div class="product span6">
                <p>Item 4</p>
            </div>
            </div> <!-- end nested row -->
        </div>
        <div id="sidebar" class="span3">
            <h2>Side</h2>
        </div>
</div> <!-- close row-fluid -->

        <div id="other" class="row-fluid">
            <div class="span12">
                <p>other details here</p>
            </div>
        </div>
    </div>

Bootstrap 3列布局，最小额外的div / row标记

1 个答案: