4

当我尝试围绕几个网格元素包裹一口井时遇到问题。我不确定它是否像这样开箱即用，或者我不确定在哪里放置井课。

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>

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

谢谢

4

1 回答 1

2

问题出在我认为DIV的well类上，因为它占用了整行的长度，然后你有 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>

我在这里叉了你的小提琴。

于 2013-05-09T12:52:37.643 回答