Bootstrap-如何将图片放在文字上方，而不是在移动设备上并排放置？

Question

我正在通过网站（ Start Bootstrap的Grayscale主题的自定义版本）帮助一个朋友，但是在使一个部分在移动设备上看起来正确时，我遇到了问题。

设置该部分的位置是为了使图像左对齐，然后在其右侧添加文本。 在常规大小下，它可以正常工作，但是在某些移动设备上，图像的右侧只会出现少量文字。 这使它看起来难以置信。 在移动设备上查看时，仅将图像居中于文本上方会更有意义。

我已经玩了几个小时，现在仍然不知道该怎么做。 我猜这与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>