我的任务是将两列放在一行中的两个中心,但我需要它们的大小为col-md-6这里是我的代码
<div class="row">
<div class="col-md-4 col-sm-3 post">
<a href="#" class="thumbnail"><img src="http://placehold.it/500" alt="" /></a>
<h2>DR. SAMUEL P. DIZON</h2><p align="justify">DR. SAMUEL P. DIZON,(SAMPLE CAPTION) M.D. is a Plan II Honors graduate from The University of Texas at Austin, and attended medical school at Baylor College of Medicine in Houston. She completed an internal medicine internship at University of Washington in Seattle and her anesthesiology residency at Baylor College of Medicine</p>
</div>
<div class="col-md-4 col-sm-3 post">
<a href="#" class="thumbnail"><img src="http://placehold.it/500" alt="" /></a>
<h2>DR. Lady RUVI S. TAGULAO</h2><p>(Sample Text)Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam totam dolore facere nulla similique magni nobis beatae eveniet deserunt quisquam nihil autem. Maxime iste voluptate laboriosam veritatis possimus qui molestias numquam officia deleniti a! Debitis itaque tempora vel quas quidem natus fugit alias aliquam maiores deserunt quibusdam error laboriosam aut.
</div>
</div>
我知道以6-6制作它会让它成为中心,但我不想要一个大尺寸的元素
答案 0 :(得分:0)
我刚刚找到了解决方案的人,你只需要在想要居中的div之前和之后有2个div,你必须按照屏幕的比例调整大小,这样就可以了:
<div class="row">
//put an empty div here sized 2 <div class="col-md-2 post"></div>
<div class="col-md-4 col-sm-3 post">
<a href="#" class="thumbnail"><img src="http://placehold.it/500" alt="" /></a>
<h2>DR. SAMUEL P. DIZON</h2><p align="justify">DR. SAMUEL P. DIZON,(SAMPLE CAPTION) M.D. is a Plan II Honors graduate from The University of Texas at Austin, and attended medical school at Baylor College of Medicine in Houston. She completed an internal medicine internship at University of Washington in Seattle and her anesthesiology residency at Baylor College of Medicine</p>
</div>
<div class="col-md-4 col-sm-3 post">
<a href="#" class="thumbnail"><img src="http://placehold.it/500" alt="" /></a>
<h2>DR. Lady RUVI S. TAGULAO</h2><p>(Sample Text)Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam totam dolore facere nulla similique magni nobis beatae eveniet deserunt quisquam nihil autem. Maxime iste voluptate laboriosam veritatis possimus qui molestias numquam officia deleniti a! Debitis itaque tempora vel quas quidem natus fugit alias aliquam maiores deserunt quibusdam error laboriosam aut.
</div>
//and another 1 here <div class="col-md-2 post"></div>
</div>