如何在bootstrap中排列div？ [英] How to center divs in row in bootstrap?

问题描述

我想集中我的7个div，我真的不知道该怎么做。任何想法？我不想单独更改所有元素的边距，因为您可以在图片div上看到相比我的按钮不居中，并且存在12列引导问题。 img src =https://i.stack.imgur.com/OG1NX.pngalt =screenshot>

  < 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; 
颜色：＃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.pngstyle =height：60px;> 
< / div> 
 
< div class =col-md-1> 
< img src =<？php echo asset_url（）;？> media / img / kalendarz / wto.pngstyle =height：60px> 
< / div> 
 
 
< div class =col-md-1> 
< img src =<？php echo asset_url（）;？> media / img / kalendarz / sro.pngstyle =height：60px> 
< / div> 
 
 
< div class =col-md-1> 
< img src =<？php echo asset_url（）;？> media / img / kalendarz / czw.pngstyle =height：60px> 
< / div> 
 
 
< div class =col-md-1> 
< img src =<？php echo asset_url（）;？> media / img / kalendarz / pia.pngstyle =height：60px> 
< / div> 
 
 
< div class =col-md-1> 
< img src =<？php echo asset_url（）;？> media / img / kalendarz / sob.pngstyle =height：60px> 
< / div> 
 
 
< div class =col-md-1> 
< img src =<？php echo asset_url（）;？> media / img / kalendarz / niedz.pngstyle =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 fontstype =submitstyle =margin-left：130px;>Powtórki< / button> 
< / div> 
< div class =col-md-3> 
 
< p class =text-center fontsstyle =margin-top：7px; font-size：30px;> Co dzisiaj zrobisz abyosiągnąćswójcel？< / p> 
 
< / div> 
 
< div> 
< button class =properbut btn btn-warning col-md-3 fontstype =submit> Lekcje audio< / button> 
< / div> 
< / div> 
< br>< br>< br>< br>< br>< br> 
< br>< br>< br>< br> 
 
< / div> 
  

解决方案

你需要像这吗？

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

I want to center my 7 divs and I don't know really how to do it. Any idea? I don't want to change margin all elements individually, as you can see on the picture divs are not centered compared to my buttons and there's a 12 column bootstrap problem

<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>

解决方案

Do you need something like this?

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

这篇关于如何在bootstrap中排列div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！