我将在序言中说我对html和css有非常基本的了解。我对jquery或bootstrap一无所知，尽管我的网站都使用了这两个（我正在修改我在网上找到的免费模板）：S。所以我提前为我的无知道歉。
所以，即使我已经搜索了解决方案，我也无法理解可能解决我遇到的问题的其他帖子。
问题： 发生的事情是bootstrap（我认为）似乎已预先确定（通过CSS）行的行高，而且由于文本的数量和字体大小，我的项目超出了该参数。正因为如此，发生的事情是下面一行中的项目被转移（见图1）。
我不希望第二列向右移动。我希望它向下移动，以便每行中第一项的左“墙”彼此齐平（见图2）。
通常情况下，我只是调整样式表，但我尝试在.row类中添加一个行高，这没有帮助，我不理解很多随附的bootstrap.min文件模板。
我认为我不能在这里提供附件，我甚至不确定代码的哪一部分是'问题'所以我不能粘贴它。我正在使用的模板是Andia，如果有帮助的话。
提前感谢您的帮助。
<head>
<meta charset="utf-8">
<title>The Vivid Stroke</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- CSS -->
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,400">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Droid+Sans">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lobster">
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/prettyPhoto/css/prettyPhoto.css">
<link rel="stylesheet" href="assets/css/flexslider.css">
<link rel="stylesheet" href="assets/css/font-awesome.css">
<link rel="stylesheet" href="assets/css/style.css">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Favicon and touch icons -->
<link rel="shortcut icon" href="assets/ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
</head>
<body>
<!-- Header -->
<div class="container">
<div class="header row">
<div class="span12">
<div class="navbar">
<div class="navbar-inner">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<h1>
<a class="brand" href="index.html">The Vivid Stroke</a>
</h1>
<div class="nav-collapse collapse">
<ul class="nav pull-right">
<li>
<a href="index.html"><i class="icon-home"></i><br />Home</a>
</li>
<li class="current-page">
<a href="portfolio.html"><i class="icon-camera"></i><br />Portfolio</a>
</li>
<li>
<a href="#"><i class="icon-comments"></i><br />Blog</a>
</li>
<li>
<a href="services.html"><i class="icon-tasks"></i><br />Services</a>
</li>
<li>
<a href="about.html"><i class="icon-user"></i><br />About</a>
</li>
<li>
<a href="contact.html"><i class="icon-envelope-alt"></i><br />Contact</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Page Title -->
<div class="page-title">
<div class="container">
<div class="row">
<div class="span12">
<i class="icon-camera page-title-icon"></i>
<h2>Portfolio /</h2>
<p>Here is some of my work</p>
</div>
</div>
</div>
</div>
<!-- Portfolio -->
<div class="portfolio portfolio-page container">
<div class="row">
<div class="portfolio-navigator span12">
<h4 class="filter-portfolio">
<a class="all" id="active-imgs" href="#">All</a> /
<a class="corporate" id="a" href="#">Corporate</a> /
<a class="abstract" id="b" href="#">Abstract</a> /
<a class="photorealism" id="c" href="#">Photorealism</a>
</h4>
</div>
</div>
<ul class="portfolio-img">
<li data-id="p-1" data-type="corporate" class="span3">
<div class="work">
<a href="assets/img/portfolio/work1.jpg">
<img src="assets/img/portfolio/work1.jpg" alt="">
</a>
<h4>May and Associates Law</h4>
<p>This painting hangs in the lobby of May and Associates law offices where dozens of people view the mosaic/abstract hybrid everyday.</p>
</div>
</li>
<li data-id="p-2" data-type="corporate" class="span3">
<div class="work">
<a href="assets/img/portfolio/work2.jpg">
<img src="assets/img/portfolio/work2.jpg" alt="">
</a>
<h4>Purple Market</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
</div>
</li>
<li data-id="p-3" data-type="corporate" class="span3">
<div class="work">
<a href="assets/img/portfolio/work3.jpg">
<img src="assets/img/portfolio/work3.jpg" alt="">
</a>
<h4>Wheels on a Frame</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
</div>
</li>
<li data-id="p-4" data-type="abstract" class="span3">
<div class="work">
<a href="assets/img/portfolio/work4.jpg">
<img src="assets/img/portfolio/work4.jpg" alt="">
</a>
<h4>Exploding Sky</h4>
<p>When the isotope filters are activated, it throws the rows off because of the height of previous items</p>
</div>
</li>
<li data-id="p-5" data-type="photorealism" class="span3">
<div class="work">
<a href="assets/img/portfolio/work5.jpg">
<img src="assets/img/portfolio/work5.jpg" alt="">
</a>
<h4>Consectetur Logo</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
</div>
</li>
<li data-id="p-6" data-type="corporate" class="span3">
<div class="work">
<a href="assets/img/portfolio/work6.jpg">
<img src="assets/img/portfolio/work6.jpg" alt="">
</a>
<h4>Adipisicing Print</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
</div>
</li>
<li data-id="p-7" data-type="corporate" class="span3">
<div class="work">
<a href="assets/img/portfolio/work7.jpg">
<img src="assets/img/portfolio/work7.jpg" alt="">
</a>
<h4>Elit Website</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
</div>
</li>
<li data-id="p-8" data-type="print-design" class="span3">
<div class="work">
<a href="assets/img/portfolio/work8.jpg">
<img src="assets/img/portfolio/work8.jpg" alt="">
</a>
<h4>Sed Do Prints</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
</div>
</li>
<li data-id="p-9" data-type="web-design" class="span3">
<div class="work">
<a href="assets/img/portfolio/work9.jpg">
<img src="assets/img/portfolio/work9.jpg" alt="">
</a>
<h4>Eiusmod Website</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
</div>
</li>
<li data-id="p-10" data-type="logo-design" class="span3">
<div class="work">
<a href="assets/img/portfolio/work10.jpg">
<img src="assets/img/portfolio/work10.jpg" alt="">
</a>
<h4>Tempor Logo</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
</div>
</li>
<li data-id="p-11" data-type="web-design" class="span3">
<div class="work">
<a href="assets/img/portfolio/work11.jpg">
<img src="assets/img/portfolio/work11.jpg" alt="">
</a>
<h4>Incididunt Website</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
</div>
</li>
<li data-id="p-12" data-type="print-design" class="span3">
<div class="work">
<a href="assets/img/portfolio/work12.jpg">
<img src="assets/img/portfolio/work12.jpg" alt="">
</a>
<h4>Ut Labore Print</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
</div>
</li>
</ul>
</div>
<!-- Footer -->
<footer>
<div class="container">
<div class="row">
<div class="widget span3">
<h4>About Us</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.</p>
<p><a href="">Read more...</a></p>
</div>
<div class="widget span3">
<h4>Latest Tweets</h4>
<div class="show-tweets"></div>
</div>
<div class="widget span3">
<h4>Flickr Photos</h4>
<ul class="flickr-feed"></ul>
</div>
<div class="widget span3">
<h4>Contact Us</h4>
<p><i class="icon-map-marker"></i> Address: Via Principe Amedeo 9, 10100, Torino, TO, Italy</p>
<p><i class="icon-phone"></i> Phone: 0039 333 12 68 347</p>
<p><i class="icon-user"></i> Skype: Andia_Agency</p>
<p><i class="icon-envelope-alt"></i> Email: <a href="">contact@andia.co.uk</a></p>
</div>
</div>
<div class="footer-border"></div>
<div class="row">
<div class="copyright span4">
<p>Copyright 2012 Andia - All rights reserved. Template by <a href="http://azmind.com">Azmind</a>.</p>
</div>
<div class="social span8">
<a class="facebook" href=""></a>
<a class="dribbble" href=""></a>
<a class="twitter" href=""></a>
<a class="pinterest" href=""></a>
</div>
</div>
</div>
</footer>
<!-- Javascript -->
<script src="assets/js/jquery-1.8.2.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/jquery.flexslider.js"></script>
<script src="assets/js/jquery.tweet.js"></script>
<script src="assets/js/jflickrfeed.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="assets/js/jquery.ui.map.min.js"></script>
<script src="assets/js/jquery.quicksand.js"></script>
<script src="assets/prettyPhoto/js/jquery.prettyPhoto.js"></script>
<script src="assets/js/scripts.js"></script>
</body>
答案 0 :(得分：0)
试试这个。放入你想要的文本。
<div class="work-container">
<div class="container">
<div class="row">
<div class="col-sm-12 work-title wow fadeIn animated" style="visibility: visible; animation-name: fadeIn;">
<h2>Our Latest Work</h2>
</div>
</div>
// First Row.
<div class="row">
<div class="col-sm-3">
<div class="work wow fadeInUp animated" style="visibility: visible; animation-name: fadeInUp;">
<img src="assets/img/portfolio/work1.jpg" alt="Lorem Website" data-at2x="assets/img/portfolio/work1.jpg">
<h3>Lorem Website</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor...</p>
<div class="work-bottom">
<a class="big-link-2 view-work" href="assets/img/portfolio/work1.jpg"><i class="fa fa-search"></i></a>
<a class="big-link-2" href="portfolio.html"><i class="fa fa-link"></i></a>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="work wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
<img src="assets/img/portfolio/work2.jpg" alt="Ipsum Logo" data-at2x="assets/img/portfolio/work2.jpg">
<h3>Ipsum Logo</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor...</p>
<div class="work-bottom">
<a class="big-link-2 view-work" href="assets/img/portfolio/work2.jpg"><i class="fa fa-search"></i></a>
<a class="big-link-2" href="portfolio.html"><i class="fa fa-link"></i></a>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="work wow fadeInUp animated" style="visibility: visible; animation-name: fadeInUp;">
<img src="assets/img/portfolio/work3.jpg" alt="Dolor Prints" data-at2x="assets/img/portfolio/work3.jpg">
<h3>Dolor Prints</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor...</p>
<div class="work-bottom">
<a class="big-link-2 view-work" href="assets/img/portfolio/work3.jpg"><i class="fa fa-search"></i></a>
<a class="big-link-2" href="portfolio.html"><i class="fa fa-link"></i></a>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="work wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
<img src="assets/img/portfolio/work4.jpg" alt="Sit Amet Website" data-at2x="assets/img/portfolio/work4.jpg">
<h3>Sit Amet Website</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor...</p>
<div class="work-bottom">
<a class="big-link-2 view-work" href="assets/img/portfolio/work4.jpg"><i class="fa fa-search"></i></a>
<a class="big-link-2" href="portfolio.html"><i class="fa fa-link"></i></a>
</div>
</div>
</div>
</div>
// Second Row Here
<div class="row">
<div class="col-sm-3">
<div class="work wow fadeInUp animated" style="visibility: visible; animation-name: fadeInUp;">
<img src="assets/img/portfolio/work1.jpg" alt="Lorem Website" data-at2x="assets/img/portfolio/work1.jpg">
<h3>Lorem Website</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor...</p>
<div class="work-bottom">
<a class="big-link-2 view-work" href="assets/img/portfolio/work1.jpg"><i class="fa fa-search"></i></a>
<a class="big-link-2" href="portfolio.html"><i class="fa fa-link"></i></a>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="work wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
<img src="assets/img/portfolio/work2.jpg" alt="Ipsum Logo" data-at2x="assets/img/portfolio/work2.jpg">
<h3>Ipsum Logo</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor...</p>
<div class="work-bottom">
<a class="big-link-2 view-work" href="assets/img/portfolio/work2.jpg"><i class="fa fa-search"></i></a>
<a class="big-link-2" href="portfolio.html"><i class="fa fa-link"></i></a>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="work wow fadeInUp animated" style="visibility: visible; animation-name: fadeInUp;">
<img src="assets/img/portfolio/work3.jpg" alt="Dolor Prints" data-at2x="assets/img/portfolio/work3.jpg">
<h3>Dolor Prints</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor...</p>
<div class="work-bottom">
<a class="big-link-2 view-work" href="assets/img/portfolio/work3.jpg"><i class="fa fa-search"></i></a>
<a class="big-link-2" href="portfolio.html"><i class="fa fa-link"></i></a>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="work wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
<img src="assets/img/portfolio/work4.jpg" alt="Sit Amet Website" data-at2x="assets/img/portfolio/work4.jpg">
<h3>Sit Amet Website</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor...</p>
<div class="work-bottom">
<a class="big-link-2 view-work" href="assets/img/portfolio/work4.jpg"><i class="fa fa-search"></i></a>
<a class="big-link-2" href="portfolio.html"><i class="fa fa-link"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
答案 1 :(得分：0)
也许您应该尝试使用“row row-eq-height”类。
尝试使用<div class="row row-eq-height"></div>代替<div class="row"></div>
将此CSS属性添加到自定义CSS
.row-eq-height{
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}