解决html问题以显示在同一行上

时间:2017-03-15 07:02:38

标签: html5 twitter-bootstrap

我有这个html5问题。目前这些课程分为两行。我需要它在一个像是在一个像我添加它继续向左,但是一次只有2。

类似这样的事情

1 ------- 2

3 ------- 4

5 ------- 6

目前的情况就像是

1 ------- 4

2 ------- 5

3 ------- 6

希望你能理解我的观点?这是代码

select  t1.plate_number
from    table t1
join    (
            select  plate_number
            from    table
            group by plate_number
            having count(*) > 1
        ) t2
on     t1.plate_number = t2.plate_number
order by t1.plate_number

Something like this - I want no partition of row

2 个答案:

答案 0 :(得分:0)

略微修改结构以修复项目的顺序并添加一些CSS规则以消除列之间的空间:

.row {
    padding-left: 15px !important;
    padding-right: 15px !important;
}
.row .col-md-6,
.row .col-sm-6,
.row .col-xs-6,
.row .col-sm-12 {
    padding-left: 0px !important;
    padding-right: 0px !important;
}
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>


    <!-- courses Start -->
        <section class="section-space-padding">
            <div class="container">
               <div class="row">
                    <div class="col-sm-12">
                        <div class="section-title">
                            <h1>Lorem ipsum</h1>
                             <div class="divider dark"></div>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eleifend risus sed feugiat faucibus.</p>
                        </div>
                    </div>
                </div>

                <div class="row">

                    <div class="courses">
                <div class="col-md-6 col-sm-6 col-xs-6">

                    <div class="courses-item">
                        <div class="courses-circle">
                           <i class="icon-book-open"></i> 
                           <p>Lorem ipsum 1</p>
                        </div>
                        <div class="courses-content courses-color-blue">
                            <h4>Lorem ipsum</h4>
                            <h6>Lorem ipsum</h6>
                            <p class="morecontentdata more">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eleifend risus sed feugiat faucibus.</p>
                        </div>
                     </div>
                </div>
                <div class="col-md-6 col-sm-6 col-xs-6">

                    <div class="courses-item">
                        <div class="courses-circle">
                           <i class="icon-book-open"></i> 
                           <p>Lorem ipsum 2</p>
                        </div>
                        <div class="courses-content courses-color-blue">
                            <h4>Lorem ipsum</h4>
                            <h6>Lorem ipsum</h6>
                            <p class="morecontentdata more">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eleifend risus sed feugiat faucibus.</p>
                        </div>
                     </div>
                </div>
                <div class="col-md-6 col-sm-6 col-xs-6">

                    <div class="courses-item">
                        <div class="courses-circle">
                           <i class="icon-book-open"></i> 
                           <p>Lorem ipsum 3</p>
                        </div>
                        <div class="courses-content courses-color-blue">
                            <h4>Lorem ipsum</h4>
                            <h6>Lorem ipsum</h6>
                            <p class="morecontentdata more">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eleifend risus sed feugiat faucibus.</p>
                        </div>
                     </div>

                 </div>
                </div>
                <div class="col-md-6 col-sm-6 col-xs-6">  
                    <div class="courses-item">
                        <div class="courses-circle">
                           <i class="icon-book-open"></i> 
                           <p>Lorem ipsum 4</p>
                        </div>
                        <div class="courses-content courses-color-blue">
                            <h4>Lorem ipsum</h4>
                            <h6>Lorem ipsum</h6>
                            <p class="morecontentdata more">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eleifend risus sed feugiat faucibus.</p>
                        </div>
                     </div>
                </div>
                <div class="col-md-6 col-sm-6 col-xs-6">

                    <div class="courses-item">
                        <div class="courses-circle">
                           <i class="icon-book-open"></i> 
                           <p>Lorem ipsum 5</p>
                        </div>
                        <div class="courses-content courses-color-blue">
                            <h4>Lorem ipsum</h4>
                            <h6>Lorem ipsum</h6>
                            <p class="morecontentdata more">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eleifend risus sed feugiat faucibus.</p>
                        </div>
                     </div>
                </div>
                <div class="col-md-6 col-sm-6 col-xs-6">

                    <div class="courses-item">
                        <div class="courses-circle">
                           <i class="icon-book-open"></i> 
                          <p>Lorem ipsum 6</p>
                        </div>
                        <div class="courses-content courses-color-blue">
                            <h4>Lorem ipsum</h4>
                            <h6>Lorem ipsum</h6>
                            <p class="morecontentdata more">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eleifend risus sed feugiat faucibus.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                        </div>
                     </div>

                 </div>
                </div>

               </div> 
        </section>
        <!-- courses End -->
 

答案 1 :(得分:0)

<div class="container">
    <div class="row">
        <div class="col-md-6">1</div>
        <div class="col-md-6">2</div>
        <div class="col-md-6">3</div>
        <div class="col-md-6">4</div>
        <div class="col-md-6">5</div>
        <div class="col-md-6">6</div>
    </div>
</div>

http://www.bootply.com/NVUPZtxxOy