【问题标题】:Center uneven portioned columns in bootstrap在引导程序中居中不均匀的部分列
【发布时间】:2015-01-19 02:51:36
【问题描述】:

我的任务是将两列放在一行中的两个中心,但我需要它们的大小为 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 会使其居中,但我不想为我的元素设置大尺寸

【问题讨论】:

  • 你能做一个jsfiddle吗?

标签: html css twitter-bootstrap laravel web


【解决方案1】:

我刚刚找到了解决方案,伙计们,您只需在要居中的 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>  

【讨论】:

    猜你喜欢
    • 2019-03-11
    • 1970-01-01
    • 1970-01-01
    • 2017-02-13
    • 1970-01-01
    • 1970-01-01
    • 2018-12-14
    • 1970-01-01
    相关资源
    最近更新 更多