Question

我对Bootstrap有一个小问题，我不知道如何解决它。想象一下以下12列布局：

<div class="container">
    ... several other row definitions...

    <div class="row">
        <div class="col-xs-12 col-sm-12">A</div>
        <div class="col-xs-12">B</div>
        <div class="col-xs-12">C</div>
        <div class="col-xs-12">D</div>
        <div class="col-xs-12 col-sm-12">E</div>
    </div>

    ... several other row definitions...
</div>

在超小型设备（xs）上，这会将A到E放入全尺寸列：

| A |
| B |
| C |
| D |
| E |

这就是我想要的。

但是在小型设备（sm）（以及任何更大的设备）上，我想将B放入D行，没有宽度，并打破网格：

| A |
| B C D |
| E |

这是否可以使用bootstrap？谢谢你的任何提示！

B，C，D本身不应该有宽度（我可以通过设置.col-sm-2类将它们与宽度对齐，但我不希望它具有固定的宽度），它们只是应该在一起（作为一行）是一个全宽（12列）。

Answer 1

解决方案 - 但我不建议：

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-12">A</div>
        <div class="col-xs-12 hidden-sm hidden-md hidden-lg">B</div>
        <div class="col-xs-12 hidden-sm hidden-md hidden-lg">C</div>
        <div class="col-xs-12 hidden-sm hidden-md hidden-lg">D</div>
        <div class="hidden-xs col-sm-12">B C D</div>
        <div class="col-xs-12 col-sm-12">E</div>
    </div>
</div>

使用Javascript的另一种解决方案：

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-12">A</div>
    </div>
    <div class="row break-sm">
        <div class="col-xs-12">B</div>
        <div class="col-xs-12">C</div>
        <div class="col-xs-12">D</div>
    </div>
    <div class="row">
        <div class="col-xs-12 col-sm-12">E</div>
    </div>
</div>

和Javascript（假设你使用Jquery）：

$(document).ready(function() {
    $(window).resize(function() {
        if ($(this).width() < 768) {
            $('.break-sm').children('div').addClass('col-xs-12');
            $('.break-sm').children('div').removeClass('inline');
        } else {
            $('.break-sm').children('div').removeClass('col-xs-12');
            $('.break-sm').children('div').addClass('inline');
        }
    });
});

inline类应包含类似display: inline-block;的内容以及您想要的其他内容。

Answer 2

所以你希望B，D，C有一个动态宽度，但总不超过100％，对吗？我认为只有bootstrap类才有可能。我必须知道这3个div有多宽，以便制定出有效的解决方案。

然而，您可以通过使用容器流体“打破网格”并在其中放入3个col-sm-4。像这样：

http://www.bootply.com/jpt7uAWOBJ

<div class="container">
    <div class="row">
        <div class="col-sm-12">A</div>
    </div>
</div>
<div class="container-fluid">
    <div class="row">
        <div class="col-sm-4">B</div>
        <div class="col-sm-4">C</div>
        <div class="col-sm-4">D</div>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="col-sm-12">E</div>
    </div>

Bootstrap 3布局打破网格

2 个答案: