All geek questions in one place

Sort bootstrap lock div 3 - col

I just don’t understand how to arrange the blocks so that col-sm-3 is on the sides and col-sm-6 is in the center, but the html code should go this way.

<div class="col-sm-6" style="background-color:red; color:#fff;">center</div>
<div class="col-sm-3 pull-left" style="background-color:blue; color:#fff;">left</div>
<div class="col-sm-3 pull-right" style="background-color:green; color:#fff;">right</div>

the code itself

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <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>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">

<div class="col-sm-6" style="background-color:red; color:#fff;">center</div>
<div class="col-sm-3 pull-left" style="background-color:blue; color:#fff;">left</div>
<div class="col-sm-3 pull-right" style="background-color:green; color:#fff;">right</div>

</div>

</body>
</html>
+4
source share
2 answers

Bootstrap V3 uses float, so the column is already left floated , so the effect pull-rightwill have an effect.

So, why not just change the order and forget the line inside the container (I changed smto xsso that we can see the result in a shortened fragment)

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
  <div class="row">
    <div class="col-xs-3" style="background-color:blue; color:#fff;">left</div>
    <div class="col-xs-6" style="background-color:red; color:#fff;">center</div>
    <div class="col-xs-3" style="background-color:green; color:#fff;">right</div>
  </div>
</div>
Run codeHide result

, , V4 , flex order:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="container">
  <div class="row">
    <div class="col-6 order-2" style="background-color:red; color:#fff;">center</div>
    <div class="col-3 order-1" style="background-color:blue; color:#fff;">left</div>
    <div class="col-3 order-3" style="background-color:green; color:#fff;">right</div>
  </div>
</div>
Hide result

, CSS V3 , , , ( , ):

.custom {
  display: inline-block;
  float: none!important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
  <div class="row">
    <div class="col-xs-6 custom" style="background-color:red; color:#fff;">center</div>
    <div class="col-xs-3 pull-left" style="background-color:blue; color:#fff;">left</div>
    <div class="col-xs-3 pull-right" style="background-color:green; color:#fff;">right</div>
  </div>
</div>
Hide result
+5

HTML, col-push col-pull bootstrap3

. col-*. change

.change .col-xs-6 {
  left: 25%;
}

.change .row .col-xs-3:not(:last-child) {
  right: 50%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container change">
  <div class="row">
    <div class="col-xs-6" style="background-color:red; color:#fff;">center</div>
    <div class="col-xs-3 pull-left" style="background-color:blue; color:#fff;">left</div>
    <div class="col-xs-3 pull-right" style="background-color:green; color:#fff;">right</div>
  </div>
</div>
Hide result

, HTML, col-push col-pull ,

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container change">
  <div class="row">
    <div class="col-xs-6 col-xs-push-3" style="background-color:red; color:#fff;">center</div>
    <div class="col-xs-3 col-xs-pull-6" style="background-color:blue; color:#fff;">left</div>
    <div class="col-xs-3" style="background-color:green; color:#fff;">right</div>
  </div>
</div>
Hide result
+2

Source: https://habr.com/ru/post/1693770/

More articles:


All Articles