我正在尝试使用 bootstrap 设计一个网站,我需要在其中放置一个带有彩色背景的小 div(row-fluid,span class of bootstrap)
这是我的代码
<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 占用了 Bootstrap 的 span12 类的整个宽度。我无法真正为该 div 分配特定宽度,因为它需要是动态的并根据其内容的长度自行拉伸(stretch)。
总结:
- 我需要使 div 类 lblue 与其中的内容一样长
有解决办法吗?
最佳答案
是的,有一个简单的方法可以解决您的问题。将以下内容添加到您的 .lblue:
display: table;
它应该与大多数(如果不是全部)浏览器兼容。
编辑 1
可以在此处找到有关该主题的更多信息:
http://www.onenaught.com/posts/201/use-css-displaytable-for-layout
关于html - 创建一个不会在 Bootstrap 跨度类中占用整个宽度的 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13525323/