Question

我试图将行分为2（span4＆amp; span8）但到目前为止无法管理。第二个div（span8）向下滑动。我缺少什么？

这是我的相关标记：

<section id="products" data-direction="from-left">
        <div class="container">
            <a href="#" class="close"></a>
            <h1>
                <span lang="tr">ÜRÜNLERİMİZ</span>
            </h1>

            <div class="container-fluid">
                <div class="row-fluid">
                    <div class="span12">

                        <div class="carousel slide" id="myCarousel">
                            <div class="carousel-inner">

                                <div class="row-fluid item active">

                                    <div class="bannerImage">
                                        <a href="#"><img src="images/waspmote_pro_t.png" alt=""></a>
                                        <a href="#"><img src="images/waspmote_exp_radio_board_2-375_t.png" alt=""></a>
                                        <a href="#"><img src="images/u13_gw_t.png" alt=""></a>
                                    </div>

                                    <div class="caption row-fluid">
                                        <div class="span12">
                                            <h3>Waspmote</h3>

                                        </div>
                                        <div class="row-fluid">
                                            <div class="span4">
                                                <ul style="list-style-type: none;">
                                                    <li><i class="fa fa-share-alt"></i> Connect any sensor</li>
                                                    <li><i class="fa fa-rss"></i> Using any wireless technology</li>
                                                    <li><i class="fa fa-cloud"></i> To any Cloud Platform</li>
                                                </ul>

                                            </div>
                                            <div class="span8">
                                                <ul style="list-style-type: none;">
                                                    <li><i class="fa fa-share-alt"></i> Connect any sensor</li>
                                                    <li><i class="fa fa-rss"></i> Using any wireless technology</li>
                                                    <li><i class="fa fa-cloud"></i> To any Cloud Platform</li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>

                                </div><!-- /Slide1 -->



                            </div>

                            <div class="control-box">
                                <a data-slide="prev" href="#myCarousel" class="carousel-control left">‹</a>
                                <a data-slide="next" href="#myCarousel" class="carousel-control right">›</a>
                            </div><!-- /.control-box -->

                        </div><!-- /#myCarousel -->

                    </div><!-- /.span12 -->
                </div><!-- /.row -->
            </div><!-- /.container -->

        </div>
    </section>

以下是截图示例： sample

这是FF调试： sample

编辑1：它是Bootstrap v3.2.0

这是我的相关自定义CSS：

div {
    word-break: break-all;
}

img {
    max-width: 100%;
}

a {
    -webkit-transition: all 150ms ease;
    -moz-transition: all 150ms ease;
    -ms-transition: all 150ms ease;
    -o-transition: all 150ms ease;
    transition: all 150ms ease;
}

    a:hover {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
        /* IE 8 */
        filter: alpha(opacity=50);
        /* IE7 */
        opacity: 0.6;
        text-decoration: none;
    }


/* Container */

.container-fluid {
    background: #fbf4e0;
    margin: 40px auto 10px;
    padding: 20px 0px;
    max-width: 960px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}


/* Page Header */

.page-header {
    background: #fbf4e0;
    margin: -30px 0px 0px;
    padding: 20px 40px;
    border-top: 4px solid #ccc;
    color: #a83b3b;
    text-transform: uppercase;
}

    .page-header h3 {
        line-height: 0.88rem;
        color: #a83b3b;
    }


/* Thumbnail Box */

.caption {
    height: 140px;
    width: 100%;
    margin: 10px 0px;
    padding: 20px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

    .caption .span4,
    .caption .span8 {
        padding: 0px 20px;
    }

    .caption .span4 {
        border-right: 1px dotted #CCCCCC;
    }

    .caption h3 {
        color: #a83b3b;
        line-height: 2rem;
        margin: 0 0 20px;
        text-transform: uppercase;
    }

    .caption p {
        font-size: 1rem;
        line-height: 1.6rem;
        color: #a83b3b;
    }
    .caption ul{
         color: #a83b3b;
    }

.btn.btn-mini {
    background: #a83b3b;
    border-radius: 0 0 0 0;
    color: #fbf4e0;
    font-size: 0.63rem;
    text-shadow: none !important;
}

.carousel-control {
    top: 33%;
}


/* Footer */

.footer {
    margin: auto;
    width: 100%;
    max-width: 960px;
    display: block;
    font-size: 0.69rem;
}

    .footer,
    .footer a {
        color: #fff;
    }

p.right {
    float: right;
}


::selection {
    background: #ff5e99;
    color: #FFFFFF;
    text-shadow: 0;
}

::-moz-selection {
    background: #ff5e99;
    color: #FFFFFF;
}

a,
a:focus,
a:active,
a:hover,
object,
embed {
    outline: none;
}

:-moz-any-link:focus {
    outline: none;
}

input::-moz-focus-inner {
    border: 0;
}

.bannerImage img {
    margin-left: 10%;
    /*margin-right: 10%;*/
}

编辑2：这是其他CSS文件。

<!-- ==============================================
       CSS
       =============================================== -->
<link href='http://fonts.googleapis.com/css?family=Raleway:700,400,500' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">

提前致谢＆amp;最诚挚的问候。

Answer 1

因此，您用于脚手架（row-fluid和span*）的类来自较旧的version引导程序。

您需要使用Bootstrap 3的脚手架类，例如：container-fluid，row，col-md-*。查看Bootstrap 3网格系统here上的完整文档。

示例：

而不是：

 <div class="container-fluid">
   <div class="row-fluid">
     <div class="span12"></div>
   </div>
   <div class="row-fluid">
     <div class="span8"></div>
     <div class="span4"></div>
   </div>
 </div>

使用：

 <div class="container-fluid">
   <div class="row">
     <div class="col-md-12"></div>
   </div>
   <div class="row">
     <div class="col-md-8"></div>
     <div class="col-md-4"></div>
   </div>
 </div>

Bootstrap行液不并排嵌套？

1 个答案: