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

我对bootstrap很新颖，只是想知道是否有一种方法可以在基本图片上显示标题，并在较小的显示屏上更改位置。在桌面上时，我希望标题显示在图像下方，但是在移动设备上时，我希望图像的右侧显示标题。如何让图像在桌面上的图片下有文字，但在Bootstrap上的移动图片的右侧？

桌面：
desktop

手机：
mobile

每当我调整了代码，它似乎选择一个或另一个，要么具有文本始终下的图像或总是右边它。非常感谢！也有一种方法可以将页脚保留在我的视图的底部，但可以滚动页面吗？

来源

2016-08-01 Zebra

请发表**最小工作示例**你的代码（HTML/CSS/JS）片段]（https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/）。参见[mcve]和[问]。 – vanburen

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

下面的代码片段将帮助您：

<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>

来源

2016-08-01 06:15:05

添加columns和offsets的味道。
如果将图像的display属性设置为block，图像会将文本推送到下一行。
您可以使用text-align属性来定位该块的内容。

例如：在

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

@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; 
 
}

<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>

来源

2016-08-01 09:30:45

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

回答

相关问题