Question

我正在尝试在移动屏幕上使列堆叠在彼此之下，但让它们在桌面上并排显示。我很困惑，这应该是超级简单但我看不到我的错误......

<section id="about">
    <div class="container">
        <div class="row text-center">
            <div class="col-md-6 col-sm-12 col-xs-12">
                <img class="ratio" src="img/about1.jpg">
                <div class="about-heading">Our Services</div>
                <div>Replace this content with your own content. Content should be relevant, unique and written with the goal of providing the reader the type of information they are looking for while motivating them to take action.</div>
            </div>
            <div class="col-md-6 col-sm-12 col-xs-12">
                <img class="ratio" src="img/about2.jpg">
                <div class="about-heading">About Us</div>
                <div>Replace this content with your own content. Content should be relevant, unique and written with the goal of providing the reader the type of information they are looking for while motivating them to take action.</div>
            </div>
        </div>
    </div>
</section>

http://goo.gl/woSq0c

Answer 1

您只需要一个col-md- col-sm- col-xs-。

有关详细信息，请参阅此答案：https://stackoverflow.com/a/19865627/2181514。

Bootstrap有12列，但是你的两列都设置为填充所有12列，因此它们永远不会彼此相邻。仅使用-6。

更改两者

<div class="col-md-6 col-sm-12 col-xs-12">

到

<div class="col-md-6">

或

<div class="col-sm-6">

列在Bootstrap中没有响应

1 个答案: