如何在bootstrap中将div排成一行？

Question

我想把我的7个div放在中心,我不知道该怎么做.任何的想法？我不想单独更改所有元素的边距,正如您在图片上看到的那样div与我的按钮相比没有居中,并且存在12列引导问题

<style type="text/css">
.properbut{
height: 180px;
display: block;
margin-left: auto;
margin-right: auto;
display: table-cell;
vertical-align: middle;

}

.fonts{
font-family:Georgia,serif;
color:#4E443C;
font-variant: small-caps; 
text-transform: none; 
font-weight: 100; 
font-size:   30px
}
</style>

<div class="container">
<br><br><br><br>

<div class="jumbotron">
    <br><br><br><br><br><br>
    <div class="row">
                    <div class ="col-md-2">
                    </div>

                    <div class ="col-md-1 ">
                       <img src="<?php echo asset_url();?>media/img/kalendarz/pon.png" style="height: 60px;">
                    </div>

                    <div class ="col-md-1 ">
                        <img src="<?php echo asset_url();?>media/img/kalendarz/wto.png"  style="height: 60px">
                    </div>


                    <div class ="col-md-1 ">
                        <img src="<?php echo asset_url();?>media/img/kalendarz/sro.png" style="height: 60px">
                    </div>


                    <div class ="col-md-1 ">
                        <img src="<?php echo asset_url();?>media/img/kalendarz/czw.png" style="height: 60px">
                    </div>


                    <div class ="col-md-1 ">
                        <img src="<?php echo asset_url();?>media/img/kalendarz/pia.png" style="height: 60px">
                    </div>


                    <div class ="col-md-1 ">
                        <img src="<?php echo asset_url();?>media/img/kalendarz/sob.png" style="height: 60px">
                    </div>


                    <div class ="col-md-1">
                        <img src="<?php echo asset_url();?>media/img/kalendarz/niedz.png" style="height: 60px">
                    </div>

                    <div class ="col-md-3">
                    </div>

    </div>
    <br><br><br><br><br><br>

    <div class="row container" >
            <div> 
                <button class="properbut btn btn-primary col-md-3 fonts" type="submit" style="margin-left: 130px;">Powtórki</button>
            </div>
            <div class="col-md-3" >

                    <p class="text-center fonts" style="margin-top: 7px; font-size: 30px;">Co dzisiaj zrobisz aby osi?gn?? swój cel?</p>

            </div>

            <div> 
                <button class="properbut btn btn-warning col-md-3 fonts"  type="submit">Lekcje audio</button>
            </div>
    </div>
    <br><br><br><br><br><br><br><br>
    <br><br><br><br>

</div>

Answer 1

CSS样式:

/* centered columns styles */
.row-centered {
text-align:center;
}
.col-centered {
display:inline-block;
float:none;
/* reset the text-align */
text-align:left;
/* inline-block space fix */
margin-right:-4px;
}

HTML:

<div class="row row-centered">

<div class ="col-md-1 col-centered">
   <img src="http://placehold.it/100x100" style="height: 60px;">
</div>

<div class ="col-md-1 col-centered">
   <img src="http://placehold.it/100x100" style="height: 60px;">
</div>

<div class ="col-md-1 col-centered">
   <img src="http://placehold.it/100x100" style="height: 60px;">
</div>

<div class ="col-md-1 col-centered">
   <img src="http://placehold.it/100x100" style="height: 60px;">
</div>

<div class ="col-md-1 col-centered">
   <img src="http://placehold.it/100x100" style="height: 60px;">
</div>

<div class ="col-md-1 col-centered">
   <img src="http://placehold.it/100x100" style="height: 60px;">
</div>

<div class ="col-md-1 col-centered">
   <img src="http://placehold.it/100x100" style="height: 60px;">
</div>

</div><!-- row -->

这应该可以帮助您解决它.

Answer 2

你需要像这样？

.row {
    text-align: center;
}
.col-md-1 {
    display:inline-block;
}