Question

的JSfiddle

为什么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>

对于bootstrap中的表，span的工作方式是否有所不同？（代码在JSFiddle中）

Answer 1

从两个按钮中删除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/

Answer 2

你可以给一个容器按钮提供浮动，所以你的代码就像

<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 3

你的JSFiddle无法正常工作，因为

你错过了bootstrap.js文件 - 这是必要的
您的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>

Bootstrap跨度不是内联的

3 个答案: