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>