Twitter引导一行上有多个div

CSS noob here. I want to divs in the same row. Using some twitter bootstrap CSS I do:

CSS noob在这里。我想在同一行中进行div。使用一些twitter bootstrap CSS我做:

.row-fluid {
   width: 100%;
   *zoom: 1;
}

.span6{
  width: 460px;
}

.row-fluid .span6 {
   width: 48.717948717948715%;
   *width: 48.664757228587014%;
}

div {
  position: relative;
  background: orange;
  height: 5em;
}

and my HTML is...

我的HTML是......

<div class="row-fluid">
<div class="span6">Foo</div>
<div class="span6">Bar</div>
</div>

the Foo and Bar are not one the one line. Any idea what I am doing wrong?

Foo和Bar不是一条线。知道我做错了什么吗?

Here is the JS fiddle: http://jsfiddle.net/cFgTA/

这是JS小提琴:http://jsfiddle.net/cFgTA/

Thanks.

2 个解决方案

#1

Are you actually using the twitter bootstrap or are you copying parts of it? You only have a small fraction of the css that actually defines the row-fluid functionality. For example, the first element normally has it's margins changes to account for the extra pixels an element has around it and all the elements that have a span* class assigned to them are supposed to float: left like mentioned by mshsayem.

你实际上是在使用twitter bootstrap还是在复制它的一部分?您只有一小部分css实际定义了行 - 流体功能。例如,第一个元素通常具有它的边距变化以考虑元素围绕它的额外像素,并且具有分配给它们的span *类的所有元素应该浮动:左边像mshsayem所提到的那样。

If you look at this fiddle, which uses a CDN bootstrap and your code commented out, there are no issues. I recommend you use the actual css file provided by twitter unless you are familiar with their stylesheet & css to make changes to it.

如果你看一下使用CDN引导程序并且你的代码被注释掉的小提琴,就没有问题。我建议您使用twitter提供的实际css文件,除非您熟悉它们的样式表和CSS以对其进行更改。

#2

I dont know bootstrap; but it seems you missed a float:left on .row-fluid .span6. Check if this is ok: http://jsfiddle.net/cFgTA/1

我不知道引导;但似乎你错过了一个漂浮物:留在.row-fluid .span6。检查这是否正常:http://jsfiddle.net/cFgTA/1