html - 引导跨度不是内联的

Question

我的代码的 JSfiddle http://jsfiddle.net/55PqG/6/

为什么button1和button2不是并排的？

<div class="row-fluid span12" style="width: 300px">
    <div class="row-fluid span6 " style="background-color: #ff0;">button1</div>
    <div class="row-fluid span6  btn" style="background-color: #f0f;">button2</div>
</div>

跨度与引导程序中的表的工作方式是否不同？（代码在 JSFiddle 中）

Answer 1

您可以将浮动赋予按钮的容器 div 之一，因此您的代码将类似于

<div class="row-fluid span12" style="width: 300px">
<div class="row-fluid span6 " style="background-color: #ff0;float:left;">button1</div>
<div class="row-fluid span6  btn" style="background-color: #f0f;">button2</div>

Answer 2

你的 JSFiddle 不能工作，因为

1. 您缺少 bootstrap.js 文件 - 这是必要的
2. 您的 bootstrap.css 文件未正确附加

考虑在 Bootstrap 的流体网格系统上阅读此http://getbootstrap.com/2.3.2/scaffolding.html#fluidGridSystem 。你想要的代码是这样的

<div class="row-fluid span12"> <!-- No specification of width, leave that to span12 -->
    <div class="span6 btn">button1</div> <!-- No row-fluid here -->
    <div class="span6 btn">button2</div>
</div>

也就是说，我不确定您为什么要使用 div 创建按钮。还可以考虑阅读有关 Bootstrap 按钮功能的http://getbootstrap.com/2.3.2/base-css.html#buttons 。

这将使您的代码更接近

<div class="row-fluid span12">
    <button type="button" class="btn span6">button1</button>
    <button type="button" class="btn span6">button2</button>
</div>

Answer 3

row-fluid从两个按钮中删除。第一个按钮也需要.btn类

<div class="span6 btn" style="background-color: #ff0;">button1</div>
<div class="span6  btn" style="background-color: #f0f;">button2</div>

JS 小提琴：http: //jsfiddle.net/55PqG/7/