Question

我只是无法理解如何排列块以便col-sm-3位于侧面，而col-sm-6位于中心，但html代码应该是这样的。

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

代码本身是

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

Answer 1

Bootstrap V3使用float，因此列已经左浮动，因此只有pull-right才会生效。

那么为什么不简单地更改顺序并且不要忘记容器内的行 （我已sm更改了xs所以我们可以看到结果在简化的摘录中

＆＃13;

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

＆＃13;

如果您想保留相同的代码，请考虑升级到引导程序的V4，您可以使用flex and order轻松处理此问题：

＆＃13;

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

＆＃13;

顺便说一句，你可以添加一些自定义CSS和V3和你的初始代码来实现你想要的但我不推荐（仅在你不能做任何改动的情况下使用）：

＆＃13;

.custom {
  display: inline-block;
  float: none!important;
}

＆＃13;

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

＆＃13;

Answer 2

由于您不想更改HTML，因此您可以使用bootstrap3的col-push和col-pull概念

^{注意：请记住使用父类来防止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>

或者在任何情况下，如果您可以更改我建议使用的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>

安排块div bootstrap 3 - col

2 个答案: