bootstrap v2.3.0 中的跨度网格

Question

我正在使用 Bootstrap v2.3.0 来设计页脚内容。我正在尝试使用 bootstrap 网格对我的列进行排序。在 v2.3.0 中，通过使用跨度（最多添加 12 列），我的列没有覆盖整行。仅在 980px 屏幕中，它会覆盖整行。但是当屏幕尺寸大于 980px 时，一些 space 会向左或在右侧被覆盖。我希望第 3 个跨度部分位于屏幕的最右侧。

我的代码输出请参考图片。 (https://i.stack.imgur.com/SlfyQ.png)

实际上我想要我的输出像下面的代码： [要求或预期输出][1]

<link href="https://getbootstrap.com/3.0.0/assets/css/bootstrap.css" rel="stylesheet" />
<link href="https://getbootstrap.com/3.0.0/assets/css/bootstrap-responsive.css" rel="stylesheet"/>
<div class="container-fluid">
  <h1>Hello World!</h1>
  <div class="row">
    <div class="col-sm-6" style="background-color:lavender;">.col-sm-6</div>
    <div class="col-sm-6" style="background-color:lavenderblush;">
      <div style="float:right;">.col-sm-6_Part-2</div>
      <div style="float:right; padding-right: 100px">.col-sm-6_Part-1</div>
    </div>
  </div>
</div>

我应该用什么来让它正确？请帮忙。提前致谢！！

下面是 current/wrong 代码。

<body>
  <div class="container-fluid">
    <h1>Hello World!</h1>
    <div class="row">
      <div class="span4" style="background-color:lavender;">span4</div>
      <div class="span4" style="background-color:lavenderblush;">span4</div>
      <div class="span4" style="background-color:lavender;">span4</div>
    </div>
  </div>
</body>

Answer 1

这里。我知道您正在使用 bootstrap v2，我明白为什么，但请这样做。

这样做

<div class="row" style="display: flex; justify-content: space-between">

我使用内联样式是为了不破坏代码的其他部分，因为 bootstrap v2 真的很旧，我不知道如果你把这个 CSS 全局地用于每个 row 元素

它会把 first span 放在屏幕左边 second span 放在屏幕中间，third span 放在屏幕右边。

这是你想做的吗？如果没有，请在评论中 post。

更新

如果您只想将第三个元素向右推，而将其他两个元素留在当前位置，您可以这样做

<div class="span4" style="background-color:lavender; float: right">span4</div>

它将将该元素浮动到其父元素的最右侧

更新 2

根据我从评论中获得的新信息，这里是解决方案

<div class="row">

你需要

<div class="row-fluid">

row-fluid 将占用父级的整个宽度，跨度将拉伸

这是 bootstrap 2 的功能。阅读更多相关信息 here

Answer 2

将rowclass替换为row-fluid:

<link href="https://stackpath.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"/>

<div class="container-fluid">
  <h1>Hello World!</h1>
  <div class="row-fluid">
    <div class="span4" style="background-color:lavender;">span4</div>
    <div class="span4" style="background-color:lavenderblush;">span4</div>
    <div class="span4" style="background-color:lavender;">span4</div>
  </div>
</div>

Answer 3

检查这个：最小代码量：

        <div class="container-fluid">
            <h1>Hello World!</h1>
            <div class="row">
                <div class="col-4 col-xs-4 col-sm-4 col-md-4 col-lg-4" style="background-color:lavender;">span4</div>
                <div class="col-4 col-xs-4 col-sm-4 col-md-4 col-lg-4" style="background-color:lavenderblush;">span4</div>
                <div class="col-4 col-xs-4 col-sm-4 col-md-4 col-lg-4" style="background-color:lavender;">span4</div>
            </div>
        </div>

检查：https://jsfiddle.net/sugandhnikhil/ut8d0j3m/

bootstrap v2.3.0 中的跨度网格

span grid in bootstrap v2.3.0

html

css

twitter-bootstrap

scaffolding