Question

我希望使用bootstrap 3在COL-LG和COL-MD配置上进行此操作

[A]图像[B]带有两个按钮的div [C]一个由javascript构成的div（id = item）

[A] [C]
[B] [C]

并且在COL-SM，COL-XS这个配置

[A]
[B]
[C]

在COL-SM上，COL-XS div设置为我想要但问题出现在COL-LG和COL-MD上：我在浏览器中看到了这个

[A]
[B] [C]
..，[C]

我试过这样的[B]：

<div class="col-lg-6 col-md-6 col-lg-pull-6 col-md-pull-6>

但我得到了这个结果：

[AB] [C]

[B]重叠[A]

<div class="container">

        <div id="img" class="col-md-6 col-lg-6">
           <img class="img-responsive" src="images/laforma.png" position:"relative">
        </div>

        <div class="col-md-7 col-lg-7">                
            <div class="btn-group-vertical">
            <button type="button" class="btn btn-default" onclick="Anticonceptivo1()">button1</button>
                <br>
            <button type="button" class="btn btn-default" onclick="Anticonceptivo2()">button2</button>
            </div>

            <script type="text/javascript">
                function Anticonceptivo1(){
                     document.getElementById('item').className = "col-lg-4 col-lg-push-1 col-md-4 col-md-push-1";
                     document.getElementById('item').innerHTML = '....';
                                          }
            </script>
            <script type="text/javascript">
                function Anticonceptivo2(){
                     document.getElementById('item').className = "col-lg-4 col-lg-push-1 col-md-4 col-md-push-1";`enter code here`
                     document.getElementById('item').innerHTML = '....';
                 }
            </script>
        </div>

        <div class="" id="item">
        </div> 
 </div>

Answer 1

据我所知你需要两个cols？其中一个包含图片和两个按钮，其他单元格用于脚本结果项

<div class="col-lg-6 col-md-6">

    <!-- img is here -->
    <img src="path_to_image">

    <!-- Buttons are here -->
    <button class="btn  btn-default">Button 1</button>
    <button class="btn  btn-default">Button 2</button>

</div>
<div class="col-lg-6 col-md-6" id="item">

     <!-- Script will add items here -->
     <!-- Butt add items without any Bootstrap classes -->

</div>

脚本像是

        <script type="text/javascript">
            function Anticonceptivo2(){
                 document.getElementById('item').innerHTML = '....';
             }
        </script>

如果我错误地理解你，请给我一些澄清。也许想象你想要的东西。

Answer 2

我想在这：

将你所有的div放在一个div（一个div包装器）中，然后在包装器内放置A和B div以及A和B div旁边的C包装器。 “Dmity S”为您写下解决问题的代码（仅将所有内容放入包装器中）。

我怎么能重新订购bootstrap 3 div？

2 个答案: