我一直试图在我的内容结构上修改我的专栏一段时间没有运气。我已经研究了bootstrap文档中的列行为，而没有对我的页面结果视图的外观进行任何实际更改。
我打算将内容放在4行中，但是除了顶行之外，每行中的随机内容之间都有空格，无论我尝试过什么都不能修复布局。我认为这是一个引导问题，但几个月来一直无法解决问题。
home.phtml
<?php require('template/header.phtml') ?> <div class="container"> <div class="row"> <!-- Start of Col Div -->
<div class="col-md-12"> <!--/.Panel for Comics --> <!-- Single button --> <!-- Count for Comics --> <?php if(count($comics)){ ?> </br>
<div class="panel panel-default">
<div class="panel-heading panel-heading-green"><h3 class="panel-title">My Comics</h3>
<form class="navbar-form navbar-left" role="search">
</div><!-- End of Panel Heading -->
<div class="panel-body">
</br>
<div class="row">
<!--/.row1 -->
<!-- Display each comic by id -->
</br>
<?php foreach($comics as $list) : ?>
<div class="col-md-3 comic">
<a href="#">
<?= ($list['image'] <> " " ? "<img style='max-width:200px; max-height:250px;' src='Images/{$list['image']}'/>" : "") ?>
</a>
<div class="comic-title">
<?= ($list['name'] <> "" ? $list['name'] : "") ?> #<?= ($list['issue'] <> "" ? $list['issue'] : "") ?>
</div>
<div class="comic-add">
</div>
</div>
<!-- End of Col-MD-3 Comic --> <!-- End of Foreach Statement for Comics --> <?php endforeach; ?> </div> </div> </br><!-- end of row --> <!-- Else show this message if user has no entries
-->
<?php
}else {
?>
<p><b>You haven't posted any comic yet!</b></p>
<?php } ?>
</div> <!-- end of panel body -->
</div> <!-- end of panel panel-default --> <!--/.row1-collapse --> </div> <!-- end of col-md-12 --> </div> <!-- End of Row --> </div> <!-- /.container --> <?php require('template/footer.phtml') ?>
CSS
body {
padding-top: 75px;
background-color: #D3D3D3;
}
html,body{
height: 100%;
}
.navbar a{
color:#fff !important;
}
.comic-box {
display:inline-block;
position:relative;
padding: 5px;
}
.cart-block{
background:#333;
color:#fff;
padding:10px;
margin-bottom:20px;
}
.panel-list a{
display:block;
color:#666;
}
.panel-list .panel-heading h3{
padding:5px;
font-size:18px;
}
.panel-heading-green{
background:#3b7e14 !important;
color:#fff !important;
}
.panel-heading-dark{
background:#333333 !important;
color:#fff !important;
}
.comic{
display:relative;
}
.comic-title{
text-align:center;
background:#333;
color:#fff;
width:70%;
}
.comic img{
width:70%;
}
.comic-add{
padding: 5px;
margin:5px auto 20px auto;
width:30%;
text-align:center;
}
.parabox{
padding: 5px;
display: box;
width: 100%;
height: 4em;
}
.details img{
width:100%;
}
.footer{
background:#333;
color:#fff;
height:70px;
text-align:center;
padding-top:20px;
display: inline;
}
.clearfix:after {
content: " "; /* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
HTML生成
<!DOCTYPE>
<html>
<head>
<link href="css/custom.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap.css" rel="stylesheet">
<title>My Comics</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body onload="initialize()" style="background-color: #D3D3D3;">
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">My Comics</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="index.php">Home</a></li>
</ul>
<!-- If email is does not equal email in database then remain in index page -->
<!-- If email does equal the one given in database login to profile -->
<!-- Display logout button along with users email -->
<div class="navbar-search navbar-brand pull-right">
<form action="logout.php" method="post">
<!-- Welcome message for user with logout button -->
Welcome lennyd1992@gmail.com <input type="submit" value="Logout" name="submit" class="btn-danger"/>
</form>
</div>
<!-- Login Form for users -->
</div>
<!--/.nav-collapse -->
</div>
</div>
<div class="container">
<div class="container">
<div class="row">
<!-- Start of Col Div -->
<div class="col-md-12">
<!--/.Panel for Comics -->
<!-- Single button -->
<!-- Count for Comics -->
</br>
<div class="panel panel-default">
<div class="panel-heading panel-heading-green"><h3 class="panel-title">My Comics</h3>
<form class="navbar-form navbar-left" role="search">
</div><!-- End of Panel Heading -->
<div class="panel-body">
</br>
<div class="row">
<!--/.row1 -->
<!-- Display each comic by id -->
</br>
<div class="col-md-3 comic">
<a href="#">
<img style='max-width:200px; max-height:250px;' src='Images/flash8.jpg'/>
</a>
<div class="comic-title">
The Flash #8 </div>
<div class="comic-add">
</div>
</div>
<!-- End of Col-MD-3 Comic -->
<!-- End of Foreach Statement for Comics -->
<div class="col-md-3 comic">
<a href="#">
<img style='max-width:200px; max-height:250px;' src='Images/justice6.jpg'/>
</a>
<div class="comic-title">
Justice League #6 </div>
<div class="comic-add">
</div>
</div>
<!-- End of Col-MD-3 Comic -->
<!-- End of Foreach Statement for Comics -->
<div class="col-md-3 comic">
<a href="#">
<img style='max-width:200px; max-height:250px;' src='Images/starwarsforce5.jpg'/>
</a>
<div class="comic-title">
Star Wars The Force Awakens #5 </div>
<div class="comic-add">
</div>
</div>
<!-- End of Col-MD-3 Comic -->
<!-- End of Foreach Statement for Comics -->
<div class="col-md-3 comic">
<a href="#">
<img style='max-width:200px; max-height:250px;' src='Images/starwarshansolo4.jpg'/>
</a>
<div class="comic-title">
Star Wars Han Solo #4 </div>
<div class="comic-add">
</div>
</div>
<!-- End of Col-MD-3 Comic -->
<!-- End of Foreach Statement for Comics -->
<div class="col-md-3 comic">
<a href="#">
<img style='max-width:200px; max-height:250px;' src='Images/walkingdead100.jpg'/>
</a>
<div class="comic-title">
The Walking Dead #100 </div>
<div class="comic-add">
</div>
</div>
<!-- End of Col-MD-3 Comic -->
<!-- End of Foreach Statement for Comics -->
<div class="col-md-3 comic">
<a href="#">
<img style='max-width:200px; max-height:250px;' src='Images/walkingdead150.jpg'/>
</a>
<div class="comic-title">
The Walking Dead #150 </div>
<div class="comic-add">
</div>
</div>
<!-- End of Col-MD-3 Comic -->
<!-- End of Foreach Statement for Comics -->
<div class="col-md-3 comic">
<a href="#">
<img style='max-width:200px; max-height:250px;' src='Images/walkingdead115.jpg'/>
</a>
<div class="comic-title">
The Walking Dead #115 </div>
<div class="comic-add">
</div>
</div>
<!-- End of Col-MD-3 Comic -->
<!-- End of Foreach Statement for Comics -->
<div class="col-md-3 comic">
<a href="#">
<img style='max-width:200px; max-height:250px;' src='Images/captainamerica223.jpg'/>
</a>
<div class="comic-title">
Captain America #223 </div>
<div class="comic-add">
</div>
</div>
<!-- End of Col-MD-3 Comic -->
<!-- End of Foreach Statement for Comics -->
<div class="col-md-3 comic">
<a href="#">
<img style='max-width:200px; max-height:250px;' src='Images/avengers227.jpg'/>
</a>
<div class="comic-title">
The Avengers #227 </div>
<div class="comic-add">
</div>
</div>
<!-- End of Col-MD-3 Comic -->
<!-- End of Foreach Statement for Comics -->
<div class="col-md-3 comic">
<a href="#">
<img style='max-width:200px; max-height:250px;' src='Images/teenage62.jpg'/>
</a>
<div class="comic-title">
Teenage Mutant Ninja Turtles #62 </div>
<div class="comic-add">
</div>
</div>
<!-- End of Col-MD-3 Comic -->
<!-- End of Foreach Statement for Comics -->
<div class="col-md-3 comic">
<a href="#">
<img style='max-width:200px; max-height:250px;' src='Images/superman7.jpg'/>
</a>
<div class="comic-title">
Superman #7 </div>
<div class="comic-add">
</div>
</div>
<!-- End of Col-MD-3 Comic -->
<!-- End of Foreach Statement for Comics -->
<div class="col-md-3 comic">
<a href="#">
<img style='max-width:200px; max-height:250px;' src='Images/thestarwars.jpg'/>
</a>
<div class="comic-title">
The Star Wars #1 </div>
<div class="comic-add">
</div>
</div>
<!-- End of Col-MD-3 Comic -->
<!-- End of Foreach Statement for Comics -->
<div class="col-md-3 comic">
<a href="#">
<img style='max-width:200px; max-height:250px;' src='Images/starwars23.jpg'/>
</a>
<div class="comic-title">
Star Wars #23 </div>
<div class="comic-add">
</div>
</div>
<!-- End of Col-MD-3 Comic -->
<!-- End of Foreach Statement for Comics -->
<div class="col-md-3 comic">
<a href="#">
<img style='max-width:200px; max-height:250px;' src='Images/teenage62sub.jpg'/>
</a>
<div class="comic-title">
Teenage Mutant Ninja Turtles #62 </div>
<div class="comic-add">
</div>
</div>
<!-- End of Col-MD-3 Comic -->
<!-- End of Foreach Statement for Comics -->
<div class="col-md-3 comic">
<a href="#">
<img style='max-width:200px; max-height:250px;' src='Images/xmen927.JPG'/>
</a>
<div class="comic-title">
X-Men92 #7 </div>
<div class="comic-add">
</div>
</div>
<!-- End of Col-MD-3 Comic -->
<!-- End of Foreach Statement for Comics -->
<div class="col-md-3 comic">
<a href="#">
<img style='max-width:200px; max-height:250px;' src='Images/teenage63.jpg'/>
</a>
<div class="comic-title">
Teenage Mutant Ninja Turtles #63 </div>
<div class="comic-add">
</div>
</div>
<!-- End of Col-MD-3 Comic -->
<!-- End of Foreach Statement for Comics -->
<div class="col-md-3 comic">
<a href="#">
<img style='max-width:200px; max-height:250px;' src='Images/teenage61.jpg'/>
</a>
<div class="comic-title">
Teenage Mutant Ninja Turtles #61 </div>
<div class="comic-add">
</div>
</div>
<!-- End of Col-MD-3 Comic -->
<!-- End of Foreach Statement for Comics -->
<div class="col-md-3 comic">
<a href="#">
<img style='max-width:200px; max-height:250px;' src='Images/teenage2.jpg'/>
</a>
<div class="comic-title">
Teenage Mutant Ninja Turtles #2 </div>
<div class="comic-add">
</div>
</div>
<!-- End of Col-MD-3 Comic -->
<!-- End of Foreach Statement for Comics -->
<div class="col-md-3 comic">
<a href="#">
<img style='max-width:200px; max-height:250px;' src='Images/spider-dead9.jpg'/>
</a>
<div class="comic-title">
Spider-Man/Deadpool #9 </div>
<div class="comic-add">
</div>
</div>
<!-- End of Col-MD-3 Comic -->
<!-- End of Foreach Statement for Comics -->
<div class="col-md-3 comic">
<a href="#">
<img style='max-width:200px; max-height:250px;' src='Images/blackmondaymurders3.png'/>
</a>
<div class="comic-title">
The Black Monday Murders #3 </div>
<div class="comic-add">
</div>
</div>
<!-- End of Col-MD-3 Comic -->
<!-- End of Foreach Statement for Comics -->
</div>
</div>
</br><!-- end of row -->
<!-- Else show this message if user has no entries -->
</div> <!-- end of panel body -->
</div> <!-- end of panel panel-default -->
<!--/.row1-collapse -->
</div> <!-- end of col-md-12 -->
</div> <!-- End of Row -->
</div> <!-- /.container -->
<br>
<br>
<footer class="footer">
<p class="text-muted">My Comics © 2016, All Rights Reserved</p>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/bootstrap/bootstrap.min.js"></script>
</body>
</html>
我也在为我的项目使用MVC。关于如何纠正这个问题的任何想法？
答案 0 :(得分：0)
由于各种高度参数不同，您的列的行为会出乎意料。 您可能的选择是使用三者中的任何一个：