我有以下标记:
.myclass {
display: flex;
flex-wrap: wrap;
}
.myclass img {
width: 100%;
display: block;
height: auto;
}
<link href="//cdn.jsdelivr.net/bootswatch/3.3.5/paper/bootstrap.css" rel="stylesheet" />
<div class="main col-md-12 col-sm-12">
<div class="container-fluid">
<div class="row myclass">
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="text-center well">
<a href="#">
<img src="#" />
<h4 class="for_bubles">My label -3</h4>
</a>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="text-center well">
<a href="#">
<img src="#" />
<h4 class="for_bubles">My label -2</h4>
</a>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="text-center well">
<a href="#">
<img src="#" />
<h4 class="for_bubles">My label -1</h4>
</a>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="text-center well">
<a href="#">
<img src="#" />
<h4 class="for_bubles">My label 0</h4>
</a>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="text-center well">
<a href="#">
<img src="#" />
<h4 class="for_bubles">My label 1</h4>
</a>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="text-center well">
<a href="#">
<img src="#" />
<h4 class="for_bubles">My label 2</h4>
</a>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="text-center well">
<a href="#">
<img src="#" />
<h4 class="for_bubles">My label 3</h4>
</a>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="text-center well">
<a href="#">
<img src="#" />
<h4 class="for_bubles">My label 4</h4>
</a>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="text-center well">
<a href="#">
<img src="#" />
<h4 class="for_bubles">My label 5</h4>
</a>
</div>
</div>
</div>
</div>
</div>
就您所见,它是 3x3 Bootstrap 网格。但它表现得非常奇怪:在我的 Firefox 中,我只有 .myclass 的一切都是正确的。 但是如果没有这条线,我有 3 个正确的列,而不是 2 个清晰的列,然后每行有 1 列。通过这一行,我在 Chrome 中遇到了错误:有 2 个正确的列和清晰的位置而不是第三列。我该如何解决这个问题?
最佳答案
在 bootstrap 中,你不应该溢出一行宽度总和大于 12 的列。这意味着你想要在布局中构建的每一行都应该在单独的 <div class="row"></div>
中。 .检查下面的代码片段是否解决了您的问题。
.myclass img {
width: 100%;
display: block;
height: auto;
}
<link href="//cdn.jsdelivr.net/bootswatch/3.3.5/paper/bootstrap.css" rel="stylesheet" />
<div class="main col-md-12 col-sm-12">
<div class="container-fluid">
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="text-center well">
<a href="#">
<img src="#" />
<h4 class="for_bubles">My label -3</h4>
</a>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="text-center well">
<a href="#">
<img src="#" />
<h4 class="for_bubles">My label -2</h4>
</a>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="text-center well">
<a href="#">
<img src="#" />
<h4 class="for_bubles">My label -1</h4>
</a>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="text-center well">
<a href="#">
<img src="#" />
<h4 class="for_bubles">My label 0</h4>
</a>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="text-center well">
<a href="#">
<img src="#" />
<h4 class="for_bubles">My label 1</h4>
</a>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="text-center well">
<a href="#">
<img src="#" />
<h4 class="for_bubles">My label 2</h4>
</a>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="text-center well">
<a href="#">
<img src="#" />
<h4 class="for_bubles">My label 3</h4>
</a>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="text-center well">
<a href="#">
<img src="#" />
<h4 class="for_bubles">My label 4</h4>
</a>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="text-center well">
<a href="#">
<img src="#" />
<h4 class="for_bubles">My label 5</h4>
</a>
</div>
</div>
</div>
</div>
关于html - Bootstrap 网格 3x3 Firefox 与 Chrome 错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39007255/