Question

在我的代码div中添加动态，我不想使用像<div class"left/right">这样的额外div来包含左或右div。

<div class="container">
  <div class="row">
    <div class="col-md-8 left">demo1</div>
    <div class="col-md-8 left">demo2</div>
    <div class="col-md-4 right">demo3</div>
  </div>
</div>

使用此代码我的div看起来像

------------------
| demo1 |
------------------
| demo2 | demo3 |
------------------

但我希望，例如

------------------
| demo1 | demo3 |
------------------
| demo2 | demo4 |
------------------
| demo5 |

表示右侧div总是左侧或左侧。如果在Bootstrap中有任何解决方案，那么它对我有好处。

Answer 1

您应该删除.row容器，因为它限制元素属于该容器本身。我使用float: left和float: right尝试了此操作。

<强> HTML

<div class="container">
    <div class="col-md-8 left">demo1</div>
    <div class="col-md-8 left">demo2</div>
    <div class="col-md-4 right">demo3</div>
    <div class="col-md-4 right">demo4</div>
    <div class="col-md-8 right">demo5</div>
    <div class="col-md-8 left">demo6</div>
    <div class="col-md-4 right">demo7</div>
    <div class="col-md-4 right">demo8</div>
</div>

<强> CSS

* {
    box-sizing: border-box;
}
.left {
    float: left;
    background-color: green;
}
.right {
    float: right;
    background-color: red;
}
.container > div {
    width: 50%;
    height: 100px;
    margin: 5px 0px;
}
.left + .left {
    clear: left;
}
.right + .right {
    clear: right;
}
.right + .right ~ .left, .left + .left ~ .right {
    position: relative;  /* or use just margin-top */
    top: -110px;      /* height + margin-top + margin-bottom */
}

<强> Working Fiddle

[注意]：如果你有更多的左/右元素，那么你应该这样使用：

.right + .right + .right ~ .left, .left + .left + .left ~ .right{
    position: relative;
    top: -220px;
}

Answer 2

方法1 使用twitter bootstrap结构

<div class="container">

  <div class="row">
    <div class="col-md-6">demo1</div>
    <div class="col-md-6">demo2</div>
  </div>

  <div class="row">
    <div class="col-md-6">demo3</div>
    <div class="col-md-6">demo4</div>
  </div>

  <div class="row">
    <div class="col-md-6">demo5</div>
    <div class="col-md-6">demo6</div>
  </div>

</div>

方法2

或者你可以简单地试试

<div class="container">
    <div class="row">
        <div class="col-md-12" id="equaldivs">

            <div>demo1</div>
            <div>demo2</div>
            <div>demo3</div>
            <div>demo4</div>
            <div>demo5</div>
            <div>demo6</div>

        </div>
    </div>
</div>

并进入你的style.css

#equaldivs div:nth-child(odd) {
    width:50%;
    float:left
}
#equaldivs div:nth-child(even) {
    width:50%;
    float:right
}

Answer 3

试试这个

<强> HTML

  <div class="row">
    <div class="col-md-8 left">demo1</div>
    <div class="col-md-8 left">demo2</div>
    <div class="col-md-4 right">demo3</div>
    <div class="col-md-8 left">demo4</div>
    <div class="col-md-4 right">demo5</div>
    <div class="col-md-4 right">demo6</div>
    <div class="col-md-4 left">demo7</div>
  </div>

<强> CSS

.row{width:100%}
.left{width:50%; float:left; min-height:20%; clear:left;}
.right{width:50%; float:right; margin-left:-50%; min-height:20%; clear:right}

Answer 4

如果你想要没有Container那么你可以使用下面的代码。

<div class="col-md-12">
     <div class="Col-md-6">
       <p>Left Side</p>
     </div>

     <div class="Col-md-6">
       <p>Right Side</p>
     </div>
</div>

Answer 5

您可以通过很少的重新安排来实现所需的视图。

<div class="container">
  <div class="row">
    <div class="col-md-8 left">demo1</div>
    <div class="col-md-4 right">demo3</div>
    <div class="col-md-8 left">demo2</div>
    <div class="col-md-4 right">demo4</div>
  </div>
</div>

在行动here中查看。

将div分为左右，没有容器div

5 个答案: