Question

请参阅下面的图片

我正在使用bootstrap缩略图。当我使用chrome的inpscet元素缩小我的屏幕尺寸时，我得到了image1中的缩略图，在进一步缩小时，我看到“转到页面”和“查看详细信息”按钮迷失方向。当我进一步缩小屏幕尺寸时，一行中的图像数量会减少，并且按钮也会像在image3中一样正确对齐。请帮我增加缩略图的最小宽度，这将导致我从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 -->

Answer 1

Bootstrap检测浏览器窗口大小以进行调整。因为检查员在停靠时进入浏览器窗口，它会破坏你的CSS布局。

要解决此问题，您可以创建一个具有更大min-width属性的新css类。

.my-thumbnail {min-width：300px！important;}并将此css类添加到缩略图html元素中。添加重要内容以覆盖现有的最小宽度。

请记住，您必须为每种屏幕尺寸执行不同的操作。您可能需要使用缩略图所在的cols的大小。

Answer 2

您可以通过浏览器控制台将浏览器减少到某个height和width。 Bootstrap响应能力适用于media queries，其中，他们将根据min-width和max-width screen为相应元素设置相对值。因此，如果它介于某个值范围之间，则应用特定样式。要确切了解响应度的准确程度，您需要使用mobile浏览器中的chrome模拟器。

例如，如果您在下面看到media query

@media (min-width: 767px){
   //some styles for grid where width=600px
}

@media (min-width: 1200px){
   //some styles for grid where width=900px
}

然后，直到屏幕宽度的768px，width的{{1}}将为grid，一旦它下降，它将减少到900px。

<强>结论

由于屏幕宽度将针对不同设备固定，并且不会在任何不规则值之间，您应该使用真实600px或使用显示的浏览器模拟器测试响应性在上面的图像

Bootstrap缩略图最小宽度

2 个答案: