我在bootstrap中有响应问题。 当我有超过四张牌时，他们不会跳过＆＃34;跳跃＆＃34;进入下一行。他们只是强加自己，同样是在我调整viev时。 我该怎么做才能解决它？我在引导程序中很新鲜，也许我在CSS文件中做错了。 你能帮我解决一下吗？
/* entire container, keeps perspective */
.flip-container {
perspective: 1000px;
}
/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
transform: rotateY(180deg);
}
/* flip speed goes here */
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
}
/* hide back of pane during swap */
.front, .back {
backface-visibility: hidden;
position: absolute;
}
/* front pane, placed above back */
.front {
z-index: 2;
/* for firefox 31 */
transform: rotateY(0deg);
}
/* back, initially hidden pane */
.back {
transform: rotateY(180deg);
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div class="container-fluid" style="text-align: center; background-color: green;">
<h1>Test Page</h1>
<div class="row">
<div class="col-sm-12 col-xs-12 col-md-12" style="background-color: green; line-height: 80px;">
<p>Some Text</p>
</div>
</div>
</div>
<div class="container col-md-12 col-sm-12 col-xs-12" >
<div class="col-md-3 col-sm-6 col-xs-6" >
<div class="flip-container " ontouchstart="this.classList.toggle('hover');" >
<div class="card-block" >
<div class="flipper " >
<div class="front " style="background-color: grey;" >
<img class="img-fluid col-sm-12 col-xs-12" src="image.jpg" alt="Card image cap" style="padding: 5px;">
<h4 class="card-title ">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
<div class="back " style="background-color: grey;">
<h4 class="card-title ">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-6" >
<div class="flip-container " ontouchstart="this.classList.toggle('hover');" >
<div class="card-block" >
<div class="flipper " >
<div class="front " style="background-color: grey;" >
<img class="img-fluid col-sm-12 col-xs-12" src="image.jpg" alt="Card image cap" style="padding: 5px;">
<h4 class="card-title ">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
<div class="back " style="background-color: grey;">
<h4 class="card-title ">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-6" >
<div class="flip-container " ontouchstart="this.classList.toggle('hover');" >
<div class="card-block" >
<div class="flipper " >
<div class="front " style="background-color: grey;" >
<img class="img-fluid col-sm-12 col-xs-12" src="image.jpg" alt="Card image cap" style="padding: 5px;">
<h4 class="card-title ">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
<div class="back " style="background-color: grey;">
<h4 class="card-title ">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-6" >
<div class="flip-container " ontouchstart="this.classList.toggle('hover');" >
<div class="card-block" >
<div class="flipper " >
<div class="front " style="background-color: grey;" >
<img class="img-fluid col-sm-12 col-xs-12" src="image.jpg" alt="Card image cap" style="padding: 5px;">
<h4 class="card-title ">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
<div class="back " style="background-color: grey;">
<h4 class="card-title ">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-6" >
<div class="flip-container " ontouchstart="this.classList.toggle('hover');" >
<div class="card-block" >
<div class="flipper " >
<div class="front " style="background-color: grey;" >
<img class="img-fluid col-sm-12 col-xs-12" src="image.jpg" alt="Card image cap" style="padding: 5px;">
<h4 class="card-title ">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
<div class="back " style="background-color: grey;">
<h4 class="card-title ">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>