爲平板電腦和智能手機定位引導程序圖像

Question

我目前正在使用引導程序構建一個網站，在該網站上我將每個節中的圖像和文本塊合併在一起，並且每次切換左/右。它看起來像這樣，我用拉左，右拉的圖像，讓他們與下面的文字排列的外邊框：

<div class="container-fluid standard-element"> 
    <div class="row"> 
    <div class="col-xs-6 col-md-6"><img src="./img/Placeholder_wideIcon.svg" class="img-responsive pull-left" alt="Responsive image"></div> 
    <div class="col-xs-12 col-md-6"> 
     <h2>Headline</h2> 
     <p>Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas faucibus mollis interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia bibendum nulla sed consectetur. Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum.</p> 
    </div> 
    </div> 
</div> 

<div class="container-fluid standard-element"> 
    <div class="row"> 
    <div class="col-xs-12 col-md-6"> 
     <h2>#Agile</h2> 
     <p>Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas faucibus mollis interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia bibendum nulla sed consectetur. Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum.</p> 
    </div> 
    <div class="col-xs-6 col-md-6"><img src="./img/Placeholder_wideIcon.svg" class="img-responsive pull-right" alt="Responsive image"></div> 
    </div> 
</div> 

現在的問題是，圖像時總是左儘快對齊因爲它們在堆疊文本塊時碰到了平板電腦肖像斷點。我現在如何將圖片放在文字旁邊的中間位置，並將它們疊放在文字上方/下方？

由於提前， 添

Answer 1

你需要使用媒體查詢目標所需的切割點，像（說）768px。然後加入這樣的事情（在這種情況下，我切爲iPad）

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { 
    .pull-left, .pull-right{margin:0 auto /* change the 0 to your liking */; display:block; float: none} 
} 

---

編輯：雖然上面可能是你在某些情況下非常有用，我已經注意到你的問題是HTML標記，並且可以很容易地解決（加上幾條CSS線）。

HTML：

<div class="container-fluid header"> 
    <div class="col-xs-12 col-md-12"> 
     <img src="http://herbigt.com/doyouevenproduct/img/Placeholder_HeaderIcon.svg" class="img-responsive center-block header-image" alt="Responsive image" /> 
    </div> 
    <div class="row"> 
     <h1>Lorem Ipsum</h1> 

     <p class="lead">Nulla vitae elit libero, a pharetra augue. Aenean eu leo quam. 
      <br />Pellentesque ornare sem lacinia quam venenatis vestibulum.</p> 
    </div> 
</div> 
<div class="container-fluid standard-element"> 
    <div class="row"> 
     <div class="col-xs-12 col-md-6 imagebox"> 
      <img style="border:1px solid red" src="http://herbigt.com/doyouevenproduct/img/Placeholder_wideIcon.svg" class="img-responsive " alt="Responsive image" /> 
     </div> 
     <div class="col-xs-12 col-md-6"> 
      <h2>Headline</h2> 

      <p>Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas faucibus mollis interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia bibendum nulla sed consectetur. Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum.</p> 
     </div> 
    </div> 
</div> 
<div class="container-fluid standard-element"> 
    <div class="row"> 
     <div class="col-xs-12 col-md-6"> 
      <h2>#Agile</h2> 

      <p>Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas faucibus mollis interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia bibendum nulla sed consectetur. Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum.</p> 
     </div> 
     <div class="col-xs-12 col-md-6 imagebox"> 
      <img style="border:1px solid red" src="http://herbigt.com/doyouevenproduct/img/Placeholder_wideIcon.svg" class="img-responsive " alt="Responsive image" /> 
     </div> 
    </div> 
</div> 

CSS：

/*Elements*/ 
.header { 
    background-color: #95d1c4; 
    text-align: center; 
    padding: 2.5em; 
} 
.header-image { 
    padding: 0.5em; 
} 
.lead { 
    padding-top: 1.0em; 
    font-size: 2.8rem; 
} 
.standard-element { 
    margin-top: 5.0em; 
    margin-bottom: 5.0em; 
    margin-left: 3.0em; 
    margin-right: 3.0em; 
    padding-bottom: 5.0em; 
    border-bottom: 2px solid; 
    border-color: #EEEEEE; 
} 
.img-section { 
    border: 1px solid red; 
} 
.last-element { 
    border-bottom: none; 
} 
.footer { 
    background-color: #95d1c4; 
    color: #ffffff; 
    text-align: center; 
    padding: 1.5em; 
} 
/*Typography*/ 
h1, h2, h3, h4, h5, h6 { 
    font-family:'Source Sans Pro', sans-serif; 
    color: #E85C41; 
} 
h1 { 
    font-size: 4.8rem; 
    font-weight: 900; 
} 
h2 { 
    font-size: 3.8rem; 
    line-height: 7.0rem; 
    font-weight: 700; 
} 
p { 
    font-family:"chaparral-pro", serif; 
    font-size: 2.0rem; 
    font-weight: light; 
    color: #464646; 
} 
a, a:visited { 
    font-family:"chaparral-pro", serif; 
    text-decoration: underline; 
    font-size: 2.0rem; 
    font-weight: light; 
    color: #464646; 
} 
a:hover { 
    font-family:"chaparral-pro", serif; 
    text-decoration: none; 
    font-size: 2.0rem; 
    font-weight: light; 
    color: #464646; 
} 
ul { 
    font-family:"chaparral-pro", serif; 
    font-size: 2.0rem; 
    font-weight: light; 
    line-height: color: #464646; 
    text-indent: none; 
} 
.imagebox { 
    text-align:center 
} 
.imagebox img { 
    margin:0 auto 
} 
/* Media Queries */ 

/* Tablet Portrait*/ 
@media (max-width: 768px) and (min-width: 481px) { 
    .pull-left, .pull-right { 
     margin:0 auto; 
     display:block; 
     float: none !important; 
    } 
    .standard-element { 
     border: 1px solid red; 
    } 
} 
/* Mobile */ 
@media (max-width: 480px) and (min-width: 0px) { 
    .pull-left, .pull-right { 
     margin:0 auto; 
     display:block; 
     float: none !important; 
    } 
    .standard-element { 
     margin-left: 0em; 
     margin-right: 0em; 
     border: 1px solid red; 
    } 
    h2 { 
     line-height: 3.5rem; 
    } 
} 

說明：因此我們將移除拉左，右類和簡單地使用默認的引導列的行爲。然後，我們只需添加一個.imagebox類，以便我們可以定位它並將圖像居中。就如此容易。

---

注：雖然看起來次要的，我注意到你不關閉你的一些標籤。至少，你的網頁永遠不會驗證（如果這對你來說是一個問題），所以記住要使用標記XHTML的方式，所以如果你沒有在驗證中得到錯誤，那就不是真的。圖像應該像這樣：<img src="your_image.jpg" alt="" />和BREAK就像這樣<br/>（注意尾部的斜槓）。