html - Bootstrap Well 填充问题

标签 html css twitter-bootstrap twitter-bootstrap-2

当我尝试在多个网格元素周围环绕一口井时遇到问题。我不确定它是否开箱即用,或者我是否不确定将井类放在哪里。

http://jsfiddle.net/AdamFollett/9xS8Y/1/

<div class="container">
    <div class="row">
        <div class="span6">
            <div class="well">
                <div class="row">
                    <div class="span3">
                        55 Fake Street<br />
                        St. Johns<br/>
                        A1E3A2<br/>
                    </div>        
                    <div class="span3">
                        more Info<br />
                        Blah Blah<br/>
                        Blah<br/>
                        <input type="button" class="btn btn-primary" value="Use Location" />
                    </div>
                </div>
                <div class="row">
                    <div class="span6">
                        <img alt="googlemap" class="googlemap" src="https://maps.google.com/maps/api/staticmap?center=43.221805,-79.858946&zoom=14&size=320x240&maptype=roadmap&markers=color:red|43.221805,-79.858946&sensor=false" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

当包含 well 类时,两个 span3 元素将无法正确间隔。我是不是没有正确使用类,还是需要添加自己的 CSS 来解决这个问题?

谢谢

最佳答案

问题在于 DIVwell 我认为是因为它占据了行的全长,然后你有 2 span3 DIV 里面的空间比 well 里面的要多(不确定我是否足够清楚)

但是,如果您将内部 row 类替换为 row-fluid 并将两个内部 DIV 类设置为 span6,它应该显示为你想要的:

            <div class="row-fluid">
                <div class="span6">55 Fake Street
                    <br />Fake Town
                    <br/>A1B2C3
                    <br/>
                </div>
                <div class="span6">more Info
                    <br />Blah Blah
                    <br/>Blah
                    <br/>
                    <input type="button" class="btn btn-primary" value="Use Location" />
                </div>
            </div>

我已经 fork 了你的 fiddle here .

关于html - Bootstrap Well 填充问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16462172/

相关文章:

html - Bootstrap 3 - HTML 表格和包装 div 之间的 1px 右间隙

html - 以编程方式调整 wkwebview 的高度

jquery - $(window).height() 似乎不准确

javascript - 滚动时更改导航栏固定顶部颜色

html - Bootstrap 折叠导航栏 - 向左拉文本

html - 2行5列全宽

html - 使用列数时在悬停时显示文本

javascript - 为什么我的 html 只加载两个 javascript 脚本之一?

android - 在普通 Android 浏览器(不是 Chrome!)上调试网站

css - 如何从另一个 css 文件覆盖 css 样式?