html – Bootstrap Well Padding Issue

2023年12月19日 243次阅读

当我尝试围绕几个网格元素包裹井时,我遇到了问题.我不确定它是否能开箱即用,或者我不确定在哪里放置井.

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来解决这个问题？

谢谢

最佳答案 问题在于DIV和井级我认为因为它需要行的全长,然后你有2个span3 DIV内部占用的空间比它们内部的井更多(不确定我是否足够清晰)

但是,如果使用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>

我已经分了你的fiddle here.

点赞