Question

我的引导问题非常糟糕。我用Google搜索了几个小时和几天来找到这个问题的解决方案，但没有任何内容。我有一个包含3行的页面，每行有3列col-md-我将每列设置为col-md-4在col-sm中我将它设置为col-sm-6和在col-xs中 - 我将它设置为col-xs-6。当我将页面的大小调整为sm或xs时，我最终得到的每行包含2列和新行中的单个列。下一行也会发生同样的事情。我知道问题是我使用了3个不同的行并且很难合并行，因为它们是通过bootstrap计算为单独的部分。但我别无选择，必须找到解决这个问题的方法。请帮帮我，我会非常感激。

<div class="container-fluid">


        <div class="row">
            <div class="col-md-4 col-sm-6 col-xs-6 portcols">
                <div class="port-container c1">
                      <p class="port-desc" style="">
                          <span style="font-size: 24px;">asdfasdfasdf</span> <br>
                        http://www.asdfasfd.com
                      </p>
                </div>
            </div>
            <div class="col-md-4 col-sm-6 col-xs-6 portcols">
                <div class="port-container c2">
                    <p class="port-desc" style="">
                        <span style="font-size: 24px;">asdfasdfasdf</span> <br>
                        http://www.asdfasfd.com
                    </p>
                </div>
            </div>
            <div class="col-md-4 col-sm-6 col-xs-6 portcols">
                <div class="port-container c3">
                    <p class="port-desc" style="">
                        <span style="font-size: 24px;">asdfasdfasdf</span> <br>
                        http://www.asdfasfd.com
                    </p>
                </div>
            </div>

        </div>
        <div class="row">
            <div class="col-md-4 col-sm-6 col-xs-6 portcols">
                <div class="port-container c4">
                    <p class="port-desc" style="">
                        <span style="font-size: 24px;">asdfasdfasdf</span> <br>
                        http://www.asdfasfd.com
                    </p>
                </div>
            </div>
            <div class="col-md-4 col-sm-6 col-xs-6 portcols">
                <div class="port-container c5">
                    <p class="port-desc" style="">
                        <span style="font-size: 24px;">asdfasdfasdf</span> <br>
                        another text
                    </p>
                </div>
            </div>
            <div class="col-md-4 col-sm-6 col-xs-6 portcols">
                <div class="port-container c6">
                    <p class="port-desc" style="">
                        <span style="font-size: 24px;">asdfasdfasdf</span> <br>
                        http://www.asdfasfd.com
                    </p>
                </div>
            </div>

        </div>
        <div class="row">
            <div class="col-md-4 col-sm-6 col-xs-6 portcols">
                <div class="port-container c7">
                    <p class="port-desc" style="">
                        <span style="font-size: 24px;">asdfasdfasdf</span> <br>
                        http://www.asdfasfd.com
                    </p>
                </div>
            </div>
            <div class="col-md-4 col-sm-6 col-xs-6 portcols">
                <div class="port-container c8">
                    <p class="port-desc" style="">
                        asdfasdfasdf<br>
                        http://www.asdfasfd.com
                    </p>
                </div>
            </div>
            <div class="col-md-4 col-sm-6 col-xs-6  portcols">
                <div class="port-container c9">
                    <p class="port-desc" style="">
                       <span style="font-size: 24px;">asdfasdfasdf</span> <br>
                        http://www.asdfasfd.com
                    </p>
                </div>
            </div>

        </div>

    </div>

第一张图片是md尺寸的页面，第二张是sm尺寸的页面

Answer 1

解决此问题的最简单方法是使用动态网页语言（如Razor或Jade）来检查窗口大小（剃刀）

@{
    var windowSize = "med"
    @if(Request.Browser.ScreenPixelsWidth < 768){
    windowSize = "small"
    }
}


    <div class="row">
        <div class="col-md-4 col-sm-6 col-xs-6 portcols">
            <div class="port-container c4">
                <p class="port-desc" style="">
                    <span style="font-size: 24px;">asdfasdfasdf</span> <br>
                    http://www.asdfasfd.com
                </p>
            </div>
        </div>
        <div class="col-md-4 col-sm-6 col-xs-6 portcols">
            <div class="port-container c5">
                <p class="port-desc" style="">
                    <span style="font-size: 24px;">asdfasdfasdf</span> <br>
                    another text
                </p>
            </div>
        </div>
@if(windowSize == "small"){
    </div>
    <div class="row">
}
        <div class="col-md-4 col-sm-6 col-xs-6 portcols">
            <div class="port-container c6">
                <p class="port-desc" style="">
                    <span style="font-size: 24px;">asdfasdfasdf</span> <br>
                    http://www.asdfasfd.com
                </p>
            </div>
        </div>
@if(windowSize == "med"){
    </div>
    <div class="row">
}
    ...etc

Answer 2

将所有列放在1行中，因为您使用3列设置为col-*-4，它们将在每3 col-*-4个div后自动分解为新行。看小提琴 https://jsfiddle.net/DIRTY_SMITH/7oe5kh9L/43/

<div class="container-fluid">


        <div class="row">
            <div class="col-md-4 col-sm-6 col-xs-6 portcols">
                <div class="port-container c1">
                      <p class="port-desc" style="">
                          <span style="font-size: 24px;">asdfasdfasdf</span> <br>
                        http://www.asdfasfd.com
                      </p>
                </div>
            </div>
            <div class="col-md-4 col-sm-6 col-xs-6 portcols">
                <div class="port-container c2">
                    <p class="port-desc" style="">
                        <span style="font-size: 24px;">asdfasdfasdf</span> <br>
                        http://www.asdfasfd.com
                    </p>
                </div>
            </div>
            <div class="col-md-4 col-sm-6 col-xs-6 portcols">
                <div class="port-container c3">
                    <p class="port-desc" style="">
                        <span style="font-size: 24px;">asdfasdfasdf</span> <br>
                        http://www.asdfasfd.com
                    </p>
                </div>
            </div>



            <div class="col-md-4 col-sm-6 col-xs-6 portcols">
                <div class="port-container c4">
                    <p class="port-desc" style="">
                        <span style="font-size: 24px;">asdfasdfasdf</span> <br>
                        http://www.asdfasfd.com
                    </p>
                </div>
            </div>
            <div class="col-md-4 col-sm-6 col-xs-6 portcols">
                <div class="port-container c5">
                    <p class="port-desc" style="">
                        <span style="font-size: 24px;">asdfasdfasdf</span> <br>
                        another text
                    </p>
                </div>
            </div>
            <div class="col-md-4 col-sm-6 col-xs-6 portcols">
                <div class="port-container c6">
                    <p class="port-desc" style="">
                        <span style="font-size: 24px;">asdfasdfasdf</span> <br>
                        http://www.asdfasfd.com
                    </p>
                </div>
            </div>


            <div class="col-md-4 col-sm-6 col-xs-6 portcols">
                <div class="port-container c7">
                    <p class="port-desc" style="">
                        <span style="font-size: 24px;">asdfasdfasdf</span> <br>
                        http://www.asdfasfd.com
                    </p>
                </div>
            </div>
            <div class="col-md-4 col-sm-6 col-xs-6 portcols">
                <div class="port-container c8">
                    <p class="port-desc" style="">
                        asdfasdfasdf<br>
                        http://www.asdfasfd.com
                    </p>
                </div>
            </div>
            <div class="col-md-4 col-sm-6 col-xs-6  portcols">
                <div class="port-container c9">
                    <p class="port-desc" style="">
                       <span style="font-size: 24px;">asdfasdfasdf</span> <br>
                        http://www.asdfasfd.com
                    </p>
                </div>
            </div>

        </div>

    </div>

列号为奇数时如何填充空格？

2 个答案: