Bootstrap - 如何将图像放在文本上方而不是并排放在移动设备上？

Question

我通过网站帮助了一位朋友 - Start Bootstrap's Grayscale theme的自定义版本 - 我在移动设备上看到一个部分时遇到了问题。

设置该部分，因此有一个左对齐的图像，然后右边有文本。它在常规尺寸下工作正常，但在某些移动设备上，图像右侧只会显示几个字的文字。这使它看起来非常尴尬。在移动设备上查看时，将图像置于文本上方会更有意义。

我已经玩了几个小时了，现在仍然无法弄清楚如何做到这一点。我猜它是与Bootstrap的网格系统有关的东西，但我不能让它在模板的方案中正常工作。

这是我的JSFiddle链接。

HTML代码：

<section class="container content-section text-center" id="about">
<div class="about-section">
    <div class="col-lg-8 col-lg-offset-2">
        <h2>About Me</h2>
        <p><img align="left" alt="Rev. Derek in Library" hspace="20px" src="http://mnreverend.com/dev2/img/revderekborder.jpg" style="width:216px;height:285px;" vspace="20px">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</div>

Answer 1

这最终不是Bootstrap特定问题（在我看来），它只是CSS。您可以使用媒体查询在您认为合适的视口大小处更改img的位置。

您可以将显示属性更改为block并删除媒体查询中图像的float（在本例中为左侧），以便图像位于较小设备上的第一段上方。

*另外，align已弃用，请改用CSS：请参阅Alignment W3C

.profile-img {
  float: left;
  margin: 7.5px 5px 2.5px;
  width: 216px;
  height: 285px;
}

@media (max-width: 600px) {
  .profile-img {
    display: block;
    float: none;
    margin: 7.5px auto 30px;
  }
}

工作示例：

body {
  width: 100%;
  height: 100%;
  font-family: "Lora", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: white;
  background-color: black;
}
html {
  width: 100%;
  height: 100%;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 35px;
  text-transform: uppercase;
  font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  letter-spacing: 1px;
}
p {
  margin: 0 0 25px;
  font-size: 18px;
  line-height: 1.5;
}
@media (min-width: 768px) {
  p {
    margin: 0 0 35px;
    font-size: 20px;
    line-height: 1.6;
  }
}
a {
  color: #42DCA3;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
a:hover,
a:focus {
  text-decoration: none;
  color: #1d9b6c;
}
.light {
  font-weight: 400;
}
.navbar-custom {
  margin-bottom: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  text-transform: uppercase;
  font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  background-color: black;
}
.navbar-custom .navbar-toggle {
  color: white;
  background-color: rgba(255, 255, 255, 0.2);
  font-size: 12px;
}
.navbar-custom .navbar-toggle:focus,
.navbar-custom .navbar-toggle:active {
  outline: none;
}
.navbar-custom .navbar-brand {
  font-weight: 700;
}
.navbar-custom .navbar-brand:focus {
  outline: none;
}
.navbar-custom a {
  color: white;
}
.navbar-custom .nav li a {
  -webkit-transition: background 0.3s ease-in-out;
  -moz-transition: background 0.3s ease-in-out;
  transition: background 0.3s ease-in-out;
}
.navbar-custom .nav li a:hover {
  color: rgba(255, 255, 255, 0.8);
  outline: none;
  background-color: transparent;
}
.navbar-custom .nav li a:focus,
.navbar-custom .nav li a:active {
  outline: none;
  background-color: transparent;
}
.navbar-custom .nav li.active {
  outline: none;
}
.navbar-custom .nav li.active a {
  background-color: rgba(255, 255, 255, 0.3);
}
.navbar-custom .nav li.active a:hover {
  color: white;
}
@media (min-width: 768px) {
  .navbar-custom {
    padding: 20px 0;
    border-bottom: none;
    letter-spacing: 1px;
    background: transparent;
    -webkit-transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;
    -moz-transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;
    transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;
  }
  .navbar-custom.top-nav-collapse {
    padding: 0;
    background: black;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  }
}
.intro {
  display: table;
  width: 100%;
  height: auto;
  padding: 100px 0;
  text-align: center;
  color: white;
  background: url(../img/thekiss.jpg) no-repeat bottom center scroll;
  background-color: black;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
}
.intro .intro-body {
  display: table-cell;
  vertical-align: middle;
}
.intro .intro-body .brand-heading {
  font-size: 40px;
}
.intro .intro-body .intro-text {
  font-size: 18px;
}
@media (min-width: 768px) {
  .intro {
    height: 100%;
    padding: 0;
  }
  .intro .intro-body .brand-heading {
    font-size: 100px;
  }
  .intro .intro-body .intro-text {
    font-size: 26px;
  }
}
.btn-circle {
  width: 70px;
  height: 70px;
  margin-top: 15px;
  padding: 7px 16px;
  border: 2px solid white;
  border-radius: 100% !important;
  font-size: 40px;
  color: white;
  background: transparent;
  -webkit-transition: background 0.3s ease-in-out;
  -moz-transition: background 0.3s ease-in-out;
  transition: background 0.3s ease-in-out;
}
.btn-circle:hover,
.btn-circle:focus {
  outline: none;
  color: white;
  background: rgba(255, 255, 255, 0.1);
}
.btn-circle i.animated {
  -webkit-transition-property: -webkit-transform;
  -webkit-transition-duration: 1s;
  -moz-transition-property: -moz-transform;
  -moz-transition-duration: 1s;
}
.btn-circle:hover i.animated {
  -webkit-animation-name: pulse;
  -moz-animation-name: pulse;
  -webkit-animation-duration: 1.5s;
  -moz-animation-duration: 1.5s;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -moz-animation-timing-function: linear;
}
@-webkit-keyframes pulse {
  0 {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@-moz-keyframes pulse {
  0 {
    -moz-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -moz-transform: scale(1.2);
    transform: scale(1.2);
  }
  100% {
    -moz-transform: scale(1);
    transform: scale(1);
  }
}
.content-section {
  padding-top: 100px;
}
.yourwedding-section {
  width: 100%;
  padding-left: 20px;
  padding-right: 20px;
  color: white;
  background-color: black;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
}
#reviews {
  padding-left: 15px;
  padding-right: 15px;
}
#services {
  padding-left: 20px;
  padding-right: 20px;
}
#contact {
  padding-left: 15px;
  padding-right: 15px;
}
#map {
  width: 100%;
  height: 200px;
  margin-top: 100px;
}
.btn {
  text-transform: uppercase;
  font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  border-radius: 0;
}
.btn-default {
  border: 1px solid #42DCA3;
  color: #42DCA3;
  background-color: transparent;
}
.btn-default:hover,
.btn-default:focus {
  border: 1px solid #42DCA3;
  outline: none;
  color: black;
  background-color: #42DCA3;
}
ul.banner-social-buttons {
  margin-top: 0;
}
@media (max-width: 1199px) {
  ul.banner-social-buttons {
    margin-top: 15px;
  }
}
@media (max-width: 767px) {
  ul.banner-social-buttons li {
    display: block;
    margin-bottom: 20px;
    padding: 0;
  }
  ul.banner-social-buttons li:last-child {
    margin-bottom: 0;
  }
}
footer {
  padding: 50px 0;
}
footer p {
  margin: 0;
}
::-moz-selection {
  text-shadow: none;
  background: #fcfcfc;
  background: rgba(255, 255, 255, 0.2);
}
::selection {
  text-shadow: none;
  background: #fcfcfc;
  background: rgba(255, 255, 255, 0.2);
}
img::selection {
  background: transparent;
}
img::-moz-selection {
  background: transparent;
}
body {
  webkit-tap-highlight-color: rgba(255, 255, 255, 0.2);
}
section#contact .form-group textarea.form-control {
  height: 236px
}
section#contact .form-group input.form-control {
  height: auto
}
section#contact .form-group input,
section#contact .form-group textarea {
  padding: 20px
}
.profile-img {
  float: left;
  margin: 7.5px 5px 2.5px;
  width: 216px;
  height: 285px;
}
@media (max-width: 600px) {
  .profile-img {
    display: block;
    float: none;
    margin: 7.5px auto 15px;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<section class="container content-section text-center" id="about">
  <div class="about-section">
    <div class="col-lg-8 col-lg-offset-2">
      <h2>About Me</h2>
      <p>
        <img alt="Rev. Derek in Library" src="http://mnreverend.com/dev2/img/revderekborder.jpg" class="profile-img">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
    </div>
  </div>
</section>

Answer 2

您可以通过简单更改标记来实现此结果，方法是将图像和文本旁边的文本放在2个单独的列中，如下例所示。我在大屏幕和中等屏幕上使用col-lg-6和col-md-6并排显示它们，但是图片和文字在col-sm-12

的较小屏幕上占据了所有12列

body{
 margin: 0;
 padding: 0;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<section class="container content-section text-center" id="about">
  <div class="about-section">
    <div class="row">
      <div class="col-lg-6 col-md-6 col-sm-12">
        <img src="http://mnreverend.com/dev2/img/revderekborder.jpg">
      </div>
      <div class="col-lg-6 col-md-6 col-sm-12">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus voluptatem quia obcaecati repellat alias nemo aperiam libero deleniti similique! Molestiae tempora libero quasi laboriosam dolor. Dolores assumenda odio, illum expedita. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex optio maxime, soluta recusandae iure tempora nam hic laborum accusantium veritatis eveniet officia ratione magnam a dolorum et adipisci quia, facere.</p>
      </div>
    </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi dolor dolores fugiat perferendis quae rem nihil iure assumenda voluptatem dolore vel veniam, cum temporibus! Eaque odit illum quisquam quod voluptas. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit quaerat id sequi quas explicabo quos vero facere, beatae incidunt fuga nobis repellendus mollitia porro magnam maxime fugiat dicta hic quam!</p>
  </div>
</section>