文章/答案/技术大牛

发布

问排列块div bootstrap 3列
EN

Stack Overflow用户

提问于 2018-02-17 21:10:05

回答 1查看 583关注 0票数 4

我只是不能理解如何排列这些块，以便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>

html

css

twitter-bootstrap

twitter-bootstrap-3

回答 1

Stack Overflow用户

发布于 2018-02-17 21:16:42

Bootstrap V3使用，所以列已经是左浮动的，所以只有会有效果。

那么，为什么不简单地更改顺序和，不要忘记容器中的行(我通过xs更改了sm，这样我们就可以在简化的代码片段中看到结果)

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

如果你想保持相同的代码，可以考虑升级到bootstrap的V4，在那里你可以用flex and 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>

顺便说一句，你可以用V3和你的初始代码添加一些自定义的CSS来达到你想要的效果，但我不推荐(只在你不能做任何改变的情况下使用)

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

票数 5

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/48841658

复制

相似问题

问排列块div bootstrap 3列
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问排列块div bootstrap 3列EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问排列块div bootstrap 3列
EN