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但有圖像和文本佔用較小的屏幕上的所有12列與col-sm-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>