在引导跨度类中创建一个不会占用整个宽度的 div答案

【问题标题】：Creating a div that wont take the whole width inside a bootstrap span class在引导跨度类中创建一个不会占用整个宽度的 div
【发布时间】：2012-11-23 08:25:27
【问题描述】：

我正在尝试设计一个带有引导程序的网站，我需要在其中放置一个带有彩色背景的小 div（行流体，引导程序的跨度类）

这是我的代码

    <style>
    .lblue{
        -moz-border-radius: 3px;
        border-radius: 3px;
        box-shadow: 
          0 1px 2px #fff, /*bottom external highlight*/
          0 -1px 1px #666, /*top external shadow*/ 
          inset 0 -1px 1px rgba(0,0,0,0.5), /*bottom internal shadow*/ 
          inset 0 1px 1px rgba(255,255,255,0.8); /*top internal highlight*/
        font-size: 16pt;
        padding: 5px;
        margin:5px;
        color:white;
        background: #4bc2d3; /* Old browsers */
        background: -moz-linear-gradient(top,  #4bc2d3 0%, #70d6e2 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4bc2d3), color-stop(100%,#70d6e2)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top,  #4bc2d3 0%,#70d6e2 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top,  #4bc2d3 0%,#70d6e2 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top,  #4bc2d3 0%,#70d6e2 100%); /* IE10+ */
        background: linear-gradient(to bottom,  #4bc2d3 0%,#70d6e2 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4bc2d3', endColorstr='#70d6e2',GradientType=0 ); /* IE6-9 */
        font-family: OpenSans-Semibold;
        }
    </style>


    <div class="row-fluid">
    <div class="span12">
    <div class="lblue">Insert Content Here</div>
    <div class="lblue">Insert Content Here</div>
    <div class="lblue">Insert Content Here</div>
    <div class="lblue">Insert Content Here</div>
    </div>
    </div>

此代码的问题在于 div 类 lblue 占据了引导程序的 span12 类的整个宽度。我无法真正为该 div 分配特定宽度，因为它需要是动态的并根据其内容的长度自行拉伸。

总结：

我需要让 div 类的 lblue 与里面的内容一样长

有解决办法吗？

【问题讨论】：

事实是主要内容为您的 div 提供了宽度，所以我认为您不能不指定固定或百分比宽度
我把所有东西都放在了小提琴里：jsfiddle.net/mGm5C
看起来像 muller 发布的内容。有没有办法让这些 div 并排而不是在单独的行上？
是的，如果你设置内部 div 的宽度，然后让 span 12 为 100%，对所有内部 div 使用 float-left，最后
感谢您的回答终于成功了

标签： html css twitter-bootstrap

【解决方案1】：

是的，有一个简单的方法可以解决您的问题。将以下内容添加到您的 .lblue：

display: table;

它应该与大多数（如果不是全部）浏览器兼容。

编辑 1

可以在此处找到有关该主题的更多信息：

http://www.onenaught.com/posts/201/use-css-displaytable-for-layout

【讨论】：