Question

Total Bootstrap n00b在这里。我试图清理/修改a resume site built with a simple site builder。

当我调整浏览器大小以检查其响应能力时，我的行为很奇怪。具体来说，我试图理解为什么当我减小浏览器尺寸时，照片会在按照＆＃34; col-sm-12＆＃34;中规定的全宽之前切换到左侧。样式。（我希望照片浮动到我的内容的左侧，除了在移动设备上堆叠它们。）

它来自：

对此：

以下是相关的HTML：

<div class="col-md-7 col-md-push-5 col-sm-12 col-xs-12" style="text-align:center">
                    <img class="editContent img-responsive" src="assets/images/content/upload/brand-book01.png" style="border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; opacity: 1;">
                </div>
                <div class="col-md-5 col-md-pull-7 col-sm-12 col-xs-12">
                    <h2 class="editContent" style="text-align: left; color: rgb(0, 0, 0); font-size: 34px; letter-spacing: 1px; font-style: normal; text-transform: none;">Creating a Brand Book</h2>
                    <div><p class="editContent mb-50" style="text-align: left; color: rgb(0, 0, 0); font-size: 16px; letter-spacing: 1px; font-style: normal; text-transform: none;">In 2015, Acme Co. was acquired by Big Conglomerate and in a matter of months we began to open physical retail stores. I proposed that we create a brand book to insure a consistent brand experience online and in stores. We formed a team and created a document that is now used across the organization.</p></div>
                </div>

            </div>
        </div>

为什么＆＃34; col-md＆＃34;之间存在中间阶段？格式化，我喜欢，以及＆＃34; col-sm＆＃34; /＆＃34; col-xs＆＃34;格式化，我也喜欢？

Answer 1

只需删除此课程表格div：content-v-align

<div class="row content-v-align">
        <div class="col-md-7 col-md-push-5 col-sm-12 col-xs-12" style="text-align:center">
                    <img class="editContent img-responsive" src="assets/images/content/upload/brand-book01.png" style="border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; opacity: 1;">
                </div>
                <div class="col-md-5 col-md-pull-7 col-sm-12 col-xs-12">
                    <h2 class="editContent" style="text-align: left; color: rgb(0, 0, 0); font-size: 34px; letter-spacing: 1px; font-style: normal; text-transform: none;">Creating a Brand Book</h2>
                    <div><p class="editContent mb-50" style="text-align: left; color: rgb(0, 0, 0); font-size: 16px; letter-spacing: 1px; font-style: normal; text-transform: none;">In 2015, Acme Co. was acquired by Big Conglomerate and in a matter of months we began to open physical retail stores. I proposed that we create a brand book to insure a consistent brand experience online and in stores. We formed a team and created a document that is now used across the organization.</p></div>
                </div>

            </div>

从Div中移除类content-V-align后，在移动视图中看起来像这样：

Answer 2

因为您使用了pull和push类用于中等屏幕（992px到1199px）。如果您想要小屏幕（768px到991px）的相同结果，请使用sm-pull和sm-push类

<div class="col-md-7 col-md-push-5 col-sm-push-5 col-sm-7 col-xs-12" style="text-align:center">
    <img class="editContent img-responsive" src="assets/images/content/upload/brand-book01.png" style="border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; opacity: 1;">
</div>
<div class="col-md-5 col-md-pull-7 col-sm-pull-7 col-sm-5 col-xs-12">
    <h2 class="editContent" style="text-align: left; color: rgb(0, 0, 0); font-size: 34px; letter-spacing: 1px; font-style: normal; text-transform: none;">Creating a Brand Book</h2>
    <div>
        <p class="editContent mb-50" style="text-align: left; color: rgb(0, 0, 0); font-size: 16px; letter-spacing: 1px; font-style: normal; text-transform: none;">In 2015, Acme Co. was acquired by Big Conglomerate and in a matter of months we began to open physical retail stores. I proposed that we create a brand book to insure a consistent brand experience online and in stores. We formed a team and created a document that is now used across the organization.</p>
    </div>
</div>
</div>

内容在md-和sm-断点之间移动

2 个答案: