Question

我想使用一个按钮来触发事件来更改变量display 然后改变布局

如果display == "v1"页面布局应为

----------------------------
|  A                       |
----------------------------
|  B                       |
----------------------------
|  C                       |
----------------------------

代码（这是我想要的）

    <div class="col-xs-12">
        <img src="https://api.fnkr.net/testimg/900x100/F00/FFF/?text=A" class="img-responsive">
    </div>
    <div class="col-xs-12">
        <img src="https://api.fnkr.net/testimg/900x600/E82/FFF/?text=B" class="img-responsive">
    </div>
    <div class="col-xs-12">
        <img src="https://api.fnkr.net/testimg/900x200/F56/FFF/?text=C" class="img-responsive">
    </div>

如果display == "v2"页面布局应为

----------------------------
|        |  A              |
|   B    |------------------
|        |  C              |
----------------------------

代码（仍有问题）

    <div class="col-xs-12 col-sm-6 col-sm-push-6">
        <img src="https://api.fnkr.net/testimg/900x100/F00/FFF/?text=A" class="img-responsive">
    </div>
    <div class="col-xs-12 col-sm-6 col-sm-pull-6 ">
        <img src="https://api.fnkr.net/testimg/900x600/E82/FFF/?text=B" class="img-responsive">
    </div>
    <div class="col-xs-12 col-sm-6 col-sm-push-6">
        <img src="https://api.fnkr.net/testimg/900x200/F56/FFF/?text=C" class="img-responsive">
    </div>

但是我的代码here有问题，A和C之间有额外的空间

----------------------------
|        |  A              |
|   B    |------------------
|        |                 |
----------------------------
|         |  C             |
----------------------------

我该如何解决这个问题？

我使用reactjs，所以我想要的逻辑如下： <div className={display==="v1" ? "col-xs-12" : "col-xs-12 col-sm-6 col-sm-push-6" }>

Ii意味着我不会这样写：

{ if(display==="v1"){
    return (
            <div class="col-xs-12">
            <img src="https://api.fnkr.net/testimg/900x100/F00/FFF/?text=A" class="img-responsive">
            </div>
            <div class="col-xs-12">
                <img src="https://api.fnkr.net/testimg/900x600/E82/FFF/?text=B" class="img-responsive">
            </div>
            <div class="col-xs-12">
                <img src="https://api.fnkr.net/testimg/900x200/F56/FFF/?text=C" class="img-responsive">
            </div>
    )else{
        return (
                <div class="col-xs-12 col-sm-6 col-sm-push-6">
                <img src="https://api.fnkr.net/testimg/900x100/F00/FFF/?text=A" class="img-responsive">
                </div>
                <div class="col-xs-12 col-sm-6 col-sm-pull-6 ">
                    <img src="https://api.fnkr.net/testimg/900x600/E82/FFF/?text=B" class="img-responsive">
                </div>
                <div class="col-xs-12 col-sm-6 col-sm-push-6">
                    <img src="https://api.fnkr.net/testimg/900x200/F56/FFF/?text=C" class="img-responsive">
                </div>
        )
    }
} }

如何修复布局display == "v2" ??

Answer 1

为此你需要在一个div（col-sm-6）中移动A和C div或图像。像这样：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-xs-12 col-sm-6 col-sm-push-6">
  <img src="https://api.fnkr.net/testimg/900x100/F00/FFF/?text=A" class="img-responsive">
  <br/>
  <img src="https://api.fnkr.net/testimg/900x200/F56/FFF/?text=C" class="img-responsive">
</div>
<div class="col-xs-12 col-sm-6 col-sm-pull-6 ">
  <img src="https://api.fnkr.net/testimg/900x600/E82/FFF/?text=B" class="img-responsive">
</div>

以下是演示：https://jsfiddle.net/54ebzzzr/1/

bootstrap推拉式更改页面布局获得了额外的空间

1 个答案: