出于某种原因,我的专栏只能在网络浏览器/平板电脑上使用。
但是,当我试图在我的 Droid 4 上查看我的网站时,我使用的图像没有显示在一行中(按列分开)。我究竟需要做什么才能使这些列发挥作用?
CSS:
<link href="css/bootstrap.css" rel="stylesheet">
<style type="text/css">
@media (max-width: 767px) { .row-fluid .image { width:50%; float:left; } }
</style>
在移动设备上查看时图像不连续:
<div class="row">
<div class="col-lg-4">
<img class="img-circle" src="img/SunnyD.jpg" alt="Generic placeholder image" width="50" height="50">
</div>
<div class="col-lg-4">
<img class="img-circle" src="img/lindt.jpg" alt="Generic placeholder image" width="50" height="50">
</div>
<div class="col-lg-4">
<img src="img/tmlogo.jpg" alt="Generic placeholder image" width="50" height="50">
</div>
</div><!-- /.row -->
在移动设备上查看时,我看到每张图片都有一个新行。在浏览器上查看时,我看到所有图像排成一行(这正是我想要的)。
最佳答案
您需要将值添加到类属性中
col-xs-
- 超小型设备手机 (<768px)
col-sm-
- 小型设备平板电脑(≥768px)
col-md-
- 中型设备桌面(≥992px)
例如,
....
<div class="col-lg-4 col-xs-1 col-sm-2 col-md-3">
....
关于html - 如何为移动设备制作 Bootstrap 列?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20934974/