请看下面的图片
我正在使用 Bootstrap 缩略图。当我使用 chrome 的 inpscet 元素缩小屏幕大小时，我得到了 image1 中的缩略图，进一步缩小时我看到“转到页面”和“查看详细信息”按钮迷失方向。当我进一步减小屏幕尺寸时，一行中的图像数量减少，并且按钮再次正确对齐，如图像 3 所示。 请帮助我增加我的缩略图的最小宽度，这将使我从 image1 到 image3...这就是防止按钮位置迷失方向。
这是页面内容的代码
<!-- Page Content -->
<div id="page-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Home</h1>
</div>
<!-- /.col-lg-12 -->
</div>
<style>
.thumbnail{
// min-width: 240px;
}
</style>
<!-- /.row -->
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
Recently added
</div>
<div class="panel-body">
<div class="row">
<div class=" col-md-4">
<div class="thumbnail">
<img src="<?php echo base_url()."assets/images/placeholder.jpg" ?>" alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p><a href="#" class="btn btn-primary" role="button">Go to page</a> <a href="#" class="btn btn-default pull-right" role="button">View Details</a></p>
</div>
</div>
</div>
<div class=" col-md-4">
<div class="thumbnail">
<img src="<?php echo base_url()."assets/images/placeholder.jpg" ?>" alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p><a href="#" class="btn btn-primary" role="button">Go to page</a> <a href="#" class="btn btn-default pull-right" role="button">View Details</a></p>
</div>
</div>
</div>
<div class=" col-md-4">
<div class="thumbnail">
<img src="<?php echo base_url()."assets/images/placeholder.jpg" ?>" alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p><a href="#" class="btn btn-primary" role="button">Go to page</a> <a href="#" class="btn btn-default pull-right" role="button">View Details</a></p>
</div>
</div>
</div>
<!-- </div>
<div class="row">-->
<div class=" col-md-4">
<div class="thumbnail">
<img src="<?php echo base_url()."assets/images/placeholder.jpg" ?>" alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p><a href="#" class="btn btn-primary" role="button">Go to page</a> <a href="#" class="btn btn-default pull-right" role="button">View Details</a></p>
</div>
</div>
</div>
<div class=" col-md-4">
<div class="thumbnail">
<img src="<?php echo base_url()."assets/images/placeholder.jpg" ?>" alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p><a href="#" class="btn btn-primary" role="button">Go to page</a> <a href="#" class="btn btn-default pull-right" role="button">View Details</a></p>
</div>
</div>
</div>
<div class=" col-md-4">
<div class="thumbnail">
<img src="<?php echo base_url()."assets/images/placeholder.jpg" ?>" alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p><a href="#" class="btn btn-primary" role="button">Go to page</a> <a href="#" class="btn btn-default pull-right" role="button">View Details</a></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
Top courses
</div>
<div class="panel-body">
List top uploaded courses
</div>
</div>
</div>
</div>
</div>
<!-- /.container-fluid -->
</div>
<!-- /#page-wrapper -->
最佳答案
Bootstrap 会检测浏览器窗口大小来进行适配。因为检查器在停靠时会进入浏览器窗口，所以它会破坏你的 css 布局。
要解决这个问题，您可以创建一个具有更大 min-width 属性的新 css 类。
.my-thumbnail { min-width: 300px !important;} 并将此 css 类添加到缩略图 html 元素。添加 important 以覆盖现有的最小宽度。
请记住，您必须针对每种屏幕尺寸执行不同的操作。您可能还需要调整缩略图所在列的大小。
关于html - Bootstrap 缩略图最小宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37304887/