如何让图像在桌面上的图片下面，但在Bootstrap的移动图片右侧？

Question

我对bootstrap很新，只是想知道是否有一种方法可以在较小的显示器上显示带有改变位置的标题的基本图片。在桌面上我希望标题显示在图像下方但在移动设备上时我希望图像显示在其右侧的标题。

桌面：

移动：

每当我调整代码时，它似乎选择了一个或另一个，并且文本总是在图像下面或总是在它的右边。 谢谢你！ 还有一种方法可以将页脚保持在我的视图底部，但滚动页面？

Answer 1

您可以使用Bootstrap Grid系统来实现此目的。 http://getbootstrap.com/css/#grid

以下代码段会帮助您：

＆＃13;

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<div class="row">
   <div class="col-xs-4 col-sm-1">
     <div class="thumbnail">
       <img src="..." alt="...">
     </div>
   </div>
   <div class="col-xs-8 col-sm-1 caption">
    <h3>Thumbnail label</h3>
    <p>...</p>
    <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

1. 添加columns和offsets品尝。

2. 如果您将图片的display属性设置为block，图片会将文字推送到下一行。

3. 您可以使用text-align属性将块的内容居中。

例如：

https://jsfiddle.net/glebkema/g73dtek2/

＆＃13;
＆＃13;
@media (min-width: 768px) {
  /* Align all centered */
  .breakfast {
    text-align: center;
  }
  .breakfast a {
    display: inline-block;
    text-align: center;
  }
  
  /* Push the text to the next line */
  .breakfast img {
    display: block;
  }
}

/* Decorations */
.breakfast {
  font-size: 32px;
  font-weight: bold;
}
.breakfast img {
  margin: 12px;
}
＆＃13;
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<div class="container">
  <div class="row breakfast">
    <div class="col-xs-10 col-xs-offset-2 col-sm-6 col-sm-offset-0">
      <a href="#">
        <img src="//placehold.it/150x150/c69/f9c/?text=Food" alt="">
        Food   
      </a>
    </div>
    <div class="col-xs-10 col-xs-offset-2 col-sm-6 col-sm-offset-0">
      <a href="#">
        <img src="//placehold.it/150x150/9c6/cf9/?text=Drink" alt="">
        Drink
      </a>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;