How to align 'N' divs on the same line?

Question

How to align 'N' divs on the same line?

Navigation

#1 by (3 votes)

1

I have the following container where I would like to keep divs on the same line:

HowcanImakethisalignment?

Followthecodebelow

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>	
  
</head>
<body>
 <div class="container">
                <div class="row">
                    <div class="col-xs-2">
                        <!-- small box -->
                        <div class="small-box bg-light-blue-gradient" style="margin-top:4%">
                            <div class="inner">
                                <h3 id="bateria">00</h3>
                                <p>TESTE</p>
                            </div>
                            <div class="icon">
                                <i class="glyphicon glyphicon-flash" style="font-size:80px;"></i>
                            </div>
                            <a href="" class="small-box-footer">Detalhes <i class="fa fa-arrow-circle-right"></i></a>
                        </div>
                    </div>
                    <!-- ./col -->
                    <div class="col-xs-2 col-half-offset">
                        <!-- small box -->
                        <div class="small-box bg-green-gradient" style="margin-top:4%">
                            <div class="inner">
                                <h3 id="jammer">00<sup style="font-size: 20px"></sup></h3>
                                <p>TESTE</p>
                            </div>
                            <div class="icon">
                                <i class="glyphicon glyphicon-flash" style="font-size:70px;"></i>
                            </div>
                            <a href="" class="small-box-footer">Detalhes <i class="fa fa-arrow-circle-right"></i></a>
                        </div>
                    </div>
                    <!-- ./col -->

                    <div class="col-xs-2 col-half-offset">
                        <!-- small box -->
                        <div class="small-box bg-yellow-gradient" style="margin-top:4%">
                            <div class="inner">
                                <h3 id="violacao">00</h3>
                                <p>TESTE</p>
                            </div>
                            <div class="icon">
                                <i class="glyphicon glyphicon-flash" style="font-size:70px;"></i>
                            </div>
                            <a href="" class="small-box-footer">Detalhes <i class="fa fa-arrow-circle-right"></i></a>
                        </div>
                    </div>
                    <!-- ./col -->
                    <div class="col-xs-2 col-half-offset">
                        <!-- small box -->
                        <div class="small-box bg-red-gradient" style="margin-top:4%">
                            <div class="inner">
                                <h3 id="roubo">00</h3>
                                <p>TESTE</p>
                            </div>
                            <div class="icon">
                                <i class="glyphicon glyphicon-flash" style="font-size:70px;"></i>
                            </div>
                            <a href="" class="small-box-footer">Detalhes <i class="fa fa-arrow-circle-right"></i></a>
                        </div>
                    </div>
                    <!-- ./col -->
                    <div class="col-xs-2 col-half-offset">
                        <!-- small box -->
                        <div class="small-box bg-purple-gradient" style="margin-top:4%">
                            <div class="inner">
                                <h3 id="panico">00</h3>
                                <p>TESTE</p>
                            </div>
                            <div class="icon">
                                <i class="glyphicon glyphicon-flash" style="font-size:70px;"></i>
                            </div>
                            <a href="" class="small-box-footer">Detalhes <i class="fa fa-arrow-circle-right"></i></a>
                        </div>
                    </div>
                    <!-- ./col -->

                    <div class="col-xs-2 col-half-offset">
                        <!-- small box -->
                        <div class="small-box bg-orange" style="margin-top:4%">
                            <div class="inner">
                                <h3 id="area">00</h3>
                                <p>TESTE</p>
                            </div>
                            <div class="icon">
                                <i class="glyphicon glyphicon-flash" style="font-size:70px;"></i>
                            </div>
                            <a href="" class="small-box-footer">Detalhes <i class="fa fa-arrow-circle-right"></i></a>
                        </div>
                    </div>
                    <!-- ./col -->
                    <div class="col-xs-2 col-half-offset">
                        <!-- small box -->
                        <div class="small-box bg-aqua" style="margin-top:4%">
                            <div class="inner">
                                <h3 id="horario">00</h3>
                                <p>TESTE</p>
                            </div>
                            <div class="icon">
                                <i class="glyphicon glyphicon-flash" style="font-size:70px;"></i>
                            </div>
                            <a href="" class="small-box-footer">Detalhes <i class="fa fa-arrow-circle-right"></i></a>
                        </div>
                    </div>
                </div>
            </div>
</body>
</html>

html css bootstrap-3

asked by anonymous 30.10.2018 / 19:52

1 answer

Can not pass parameter 2 by reference using PDO like List getResults returns list with elements equal

score 3 · Accepted Answer

One of the ways to do this is to remove the class col- from divs within row and row put display as flex and distribute content with justify-content: space-between;

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>	
  <style>
  .d-flex {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  </style>
</head>
<body>
 <div class="container">
                <div class="row d-flex">
                    <div class="">
                        <!-- small box -->
                        <div class="small-box bg-light-blue-gradient" style="margin-top:4%">
                            <div class="inner">
                                <h3 id="bateria">00</h3>
                                <p>TESTE</p>
                            </div>
                            <div class="icon">
                                <i class="glyphicon glyphicon-flash" style="font-size:80px;"></i>
                            </div>
                            <a href="" class="small-box-footer">Detalhes <i class="fa fa-arrow-circle-right"></i></a>
                        </div>
                    </div>
                    <!-- ./col -->
                    <div class="">
                        <!-- small box -->
                        <div class="small-box bg-green-gradient" style="margin-top:4%">
                            <div class="inner">
                                <h3 id="jammer">00<sup style="font-size: 20px"></sup></h3>
                                <p>TESTE</p>
                            </div>
                            <div class="icon">
                                <i class="glyphicon glyphicon-flash" style="font-size:70px;"></i>
                            </div>
                            <a href="" class="small-box-footer">Detalhes <i class="fa fa-arrow-circle-right"></i></a>
                        </div>
                    </div>
                    <!-- ./col -->

                    <div class="">
                        <!-- small box -->
                        <div class="small-box bg-yellow-gradient" style="margin-top:4%">
                            <div class="inner">
                                <h3 id="violacao">00</h3>
                                <p>TESTE</p>
                            </div>
                            <div class="icon">
                                <i class="glyphicon glyphicon-flash" style="font-size:70px;"></i>
                            </div>
                            <a href="" class="small-box-footer">Detalhes <i class="fa fa-arrow-circle-right"></i></a>
                        </div>
                    </div>
                    <!-- ./col -->
                    <div class="">
                        <!-- small box -->
                        <div class="small-box bg-red-gradient" style="margin-top:4%">
                            <div class="inner">
                                <h3 id="roubo">00</h3>
                                <p>TESTE</p>
                            </div>
                            <div class="icon">
                                <i class="glyphicon glyphicon-flash" style="font-size:70px;"></i>
                            </div>
                            <a href="" class="small-box-footer">Detalhes <i class="fa fa-arrow-circle-right"></i></a>
                        </div>
                    </div>
                    <!-- ./col -->
                    <div class="">
                        <!-- small box -->
                        <div class="small-box bg-purple-gradient" style="margin-top:4%">
                            <div class="inner">
                                <h3 id="panico">00</h3>
                                <p>TESTE</p>
                            </div>
                            <div class="icon">
                                <i class="glyphicon glyphicon-flash" style="font-size:70px;"></i>
                            </div>
                            <a href="" class="small-box-footer">Detalhes <i class="fa fa-arrow-circle-right"></i></a>
                        </div>
                    </div>
                    <!-- ./col -->

                    <div class="">
                        <!-- small box -->
                        <div class="small-box bg-orange" style="margin-top:4%">
                            <div class="inner">
                                <h3 id="area">00</h3>
                                <p>TESTE</p>
                            </div>
                            <div class="icon">
                                <i class="glyphicon glyphicon-flash" style="font-size:70px;"></i>
                            </div>
                            <a href="" class="small-box-footer">Detalhes <i class="fa fa-arrow-circle-right"></i></a>
                        </div>
                    </div>
                    <!-- ./col -->
                    <div class="">
                        <!-- small box -->
                        <div class="small-box bg-aqua" style="margin-top:4%">
                            <div class="inner">
                                <h3 id="horario">00</h3>
                                <p>TESTE</p>
                            </div>
                            <div class="icon">
                                <i class="glyphicon glyphicon-flash" style="font-size:70px;"></i>
                            </div>
                            <a href="" class="small-box-footer">Detalhes <i class="fa fa-arrow-circle-right"></i></a>
                        </div>
                    </div>
                </div>
            </div>
</body>
</html>