为平板电脑和智能手机定位引导程序图像

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/>（注意尾部的斜杠）。