Question

我无法在我的bootstrap主页上获得跨度和网格正常工作。我希望“联系”和“营业时间”在每个跨度6并排坐在一起，但是它们会在其上方的英雄单元的宽度下相互衔接。如何让跨度保持稳定？

home.html的

    <div class="center hero-unit">
        <h1>Welcome</h1>
        <h4>
            //fill with store info
        </h4>
    </div>
    <div class="span6">
        <div class="center hero-unit"> 
        <h1> Contact </h1>
        <h4> 314.555.3000 </h4>
        <h4> 100 St. Louis Ave </h4>
        </div>
    </div>

    <div class="span6">
        <div class="center hero-unit"> 
        <h1> Store Hours </h1>
        <h4> Monday - Thursday // 10:30 AM to 8:00 PM</h4> 
        <h4> Friday - Saturday // 10:30 AM to 9:00 PM</h4>
        <h4> Sunday // Closed </h4>
        </div>
    </div>
    </div>

stylesheet.css中

.hero-unit {
    text-align: center;
    background-color: #99CCFF;
    margin: 90px;
    padding: 20px;
    font-size: 11px;
    line-height: 1.4em;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    box-shadow: 1px 1px 10px #444;
    border-color: #3399FF;
}

Answer 1

嗯，如果我没有错误的引导类是：“col-md-6”或“col-lg-6”等此外，您需要将colummns包装在“行”

中

你应该尝试类似的东西：

    <div class="row">
<div class="col-md-6">&nbsp;</div>
<div class="col-md-6">&nbsp;</div>
</div>

此外，您关闭1 div太多，最后</div>

Answer 2

尝试使用Bootstrap 3：

<div class="row">
    <div class="col-xs-6 col-md-6 col-lg-6">
        <div class="center hero-unit">
            <h1>Welcome</h1>
            <h4>
                //fill with store info
            </h4>
        </div>
    </div>

    <div class="col-xs-6 col-md-6 col-lg-6">
        <div class="center hero-unit">
            <h1> Contact </h1>
            <h4> 314.555.3000 </h4>
            <h4> 100 St. Louis Ave </h4>
        </div>
    </div>

    <div class="col-xs-6 col-md-6 col-lg-6">
        <div class="center hero-unit">
            <h1> Store Hours </h1>
            <h4> Monday - Thursday // 10:30 AM to 8:00 PM</h4>
            <h4> Friday - Saturday // 10:30 AM to 9:00 PM</h4>
            <h4> Sunday // Closed </h4>
        </div>
    </div>
</div>

其他Bootstrap 2：

<div class="row-fluid">
    <div class="span6">
        <div class="center hero-unit">
            <h1>Welcome</h1>
            <h4>
                //fill with store info
            </h4>
        </div>
    </div>

    <div class="span6">
        <div class="center hero-unit">
            <h1> Contact </h1>
            <h4> 314.555.3000 </h4>
            <h4> 100 St. Louis Ave </h4>
        </div>
    </div>

    <div class="span6">
        <div class="center hero-unit">
            <h1> Store Hours </h1>
            <h4> Monday - Thursday // 10:30 AM to 8:00 PM</h4>
            <h4> Friday - Saturday // 10:30 AM to 9:00 PM</h4>
            <h4> Sunday // Closed </h4>
        </div>
    </div>
</div>

Bootstrap网格和跨度

2 个答案: