html - 我的 col-xs-12 在平板电脑和桌面模式下破坏了我的行

Question

.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15 {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}
.col-md-15 img {
    height: 200px;
    width: 200px;
}
.margin20
{
	margin-top: 20px;
}
/*new set of column*/
.col-xs-15 {
    width: 20%;
    float: left;
}
@media (min-width: 768px) {
 /*even if i remove this nothing happen*/
.col-sm-15 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 992px) {
    .col-md-15 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 1200px) {
    .col-lg-15 {
        width: 20%;
        float: left;
    }
}
*overlay*/
.img-container {
    position: relative;
    width: 100%;
}
.red {
  background-color: #B2B2B2; 
}
.image {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%)
}

.img-container .image {
  opacity: 0.3;
}

.img-container .middle {
  opacity: 1;
}

.text {
  background-color: transparent;
  color: white;
  font-size: 24px;
  padding: 16px 32px;
  font-family: 'Archivo Black', sans-serif;
  text-align: center;
}

<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="Custom.css" type="text/css"/>
	<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
	<link href="https://fonts.googleapis.com/css?family=Lato|Ubuntu" rel="stylesheet"> 
	<link href="https://fonts.googleapis.com/css?family=Archivo+Black" rel="stylesheet"> 
<div class="container">
<div class="row">
				<div class="col-md-15 col-sm-15 col-xs-12">
					<div class="img-container red">
					  <img src="https://introcs.cs.princeton.edu/java/stdlib/mandrill200x200.jpg" alt="Avatar" class="image" style="width:100%">
					  <div class="middle">
					    <div class="text">MEN'S APPAREL</div>
					  </div>
					</div>
				</div>
				<div class="col-md-15 col-sm-15 col-xs-12">
					<div class="img-container red">
					  <img src="https://introcs.cs.princeton.edu/java/stdlib/mandrill200x200.jpg" alt="Avatar" class="image" style="width:100%">
					  <div class="middle">
					    <div class="text">MEN'S APPAREL</div>
					  </div>
					</div>
				</div>
				<div class="col-md-15 col-sm-15 col-xs-12">
					<div class="img-container red">
					  <img src="img/sample.png" alt="Avatar" class="image" style="width:100%">
					  <div class="middle">
					    <div class="text">MEN'S APPAREL</div>
					  </div>
					</div>
				</div>
				<div class="col-md-15 col-sm-15 col-xs-12">
					<div class="img-container red">
					  <img src="https://introcs.cs.princeton.edu/java/stdlib/mandrill200x200.jpg" alt="Avatar" class="image" style="width:100%">
					  <div class="middle">
					    <div class="text">MEN'S APPAREL</div>
					  </div>
					</div>
				</div>
				<div class="col-md-15 col-sm-15 col-xs-12">
					<div class="img-container red">
					  <img src="https://introcs.cs.princeton.edu/java/stdlib/mandrill200x200.jpg" alt="Avatar" class="image" style="width:100%">
					  <div class="middle">
					    <div class="text">MEN'S APPAREL</div>
					  </div>
					</div>
				</div>
			</div>
			<div class="row margin20">
				<div class="col-md-15 col-sm-15 col-xs-12">
					<div class="img-container red">
					  <img src="https://introcs.cs.princeton.edu/java/stdlib/mandrill200x200.jpg" alt="Avatar" class="image" style="width:100%">
					  <div class="middle">
					    <div class="text">MEN'S APPAREL</div>
					  </div>
					</div>
				</div>
				<div class="col-md-15 col-sm-15 col-xs-12">
					<div class="img-container red">
					  <img src="https://introcs.cs.princeton.edu/java/stdlib/mandrill200x200.jpg" alt="Avatar" class="image" style="width:100%">
					  <div class="middle">
					    <div class="text">MEN'S APPAREL</div>
					  </div>
					</div>
				</div>
				<div class="col-md-15 col-sm-15 col-xs-12">
					<div class="img-container red">
					  <img src="https://introcs.cs.princeton.edu/java/stdlib/mandrill200x200.jpg" alt="Avatar" class="image" style="width:100%">
					  <div class="middle">
					    <div class="text">MEN'S APPAREL</div>
					  </div>
					</div>
				</div>
				<div class="col-md-15 col-sm-15 col-xs-12">
					<div class="img-container red">
					  <img src="https://introcs.cs.princeton.edu/java/stdlib/mandrill200x200.jpg" alt="Avatar" class="image" style="width:100%">
					  <div class="middle">
					    <div class="text">MEN'S APPAREL</div>
					  </div>
					</div>
				</div>
				<div class="col-md-15 col-sm-15 col-xs-12">
					<div class="img-container red">
					  <img src="https://introcs.cs.princeton.edu/java/stdlib/mandrill200x200.jpg" alt="Avatar" class="image" style="width:100%">
					  <div class="middle">
					    <div class="text">MEN'S APPAREL</div>
					  </div>
					</div>
				</div>
			</div>
		</div>

我想将我的行分成 5 等份，这就是我使用 col-md-15 和 col-sm-15 的原因，它在平板电脑、移动设备和台式机上运行良好(如果您删除 col-xs -12 在每个标签中)，但是在移动模式下，我希望图像每行 1 个，这就是我插入 col-xs-12 的原因，但是当我这样做时，平板电脑和桌面模式下的行变为每行 1 个并拉伸(stretch)这是我不想要的。如何解决这个问题？

Answer 1

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="Custom.css" type="text/css"/>

您在引导 css 之前加载自定义 css，将其切换。

编辑了示例，sry，我的意思是相反的。自定义 css 最后，因此它会覆盖其他代码。