html - 怎样才能跨越这些元素，从而做出响应呢？

Question

我有这个网站:

http://avocat2.dac-proiect.ro/?page_id=25

在这一点上，我的元素已经按照他们的意愿居中了。唯一的问题是它没有响应。

这是 HTML 代码:

 <div class="parentVerticalCenter">
    <div class="childVerticalCenter">


    <div class="row sss">

    <div class="col-sm-4 col-md-4 col-lg-12 col-lg-offset-0" style="font-size:17px;color:white;">

        <div class="container3">
               <div class="centered">[Contact_Form_Builder id="10"]</div>
        </div>

          </div>

        </div>

  </div>        
</div>

这是 CSS 代码:

   .container3 {
      background-color: green;
    }
    .centered {
      display: table;
      margin: 0 auto;
      background-color: red;
    }

     div[wdid="4"] {
    width: 40%;
    display: inline-block;
}

     div[wdid="22"] {
    width: 40%;
    display: inline-block;
    margin-left:-40px;
}


     div[wdid="2"] {
    width: 40%;
    display: inline-block;
}

     div[wdid="6"] {
    width: 40%;
    display: inline-block;
    margin-left:-40px;
}

如果删除此代码，我的元素会响应，但不会正确对齐。

 .contactform10 .wdform_column
{
width:50% !important;
}

我尝试为此使用最小宽度和最大宽度，但不起作用，所以将其中一个置于其他元素之上

基本上，我的 div 红色被分成两个相等的部分，每个部分的宽度为 50%。

你能帮我解决这个问题吗？ 元素按现在的样子显示并响应。

提前致谢!

Answer 1

在 Bootstrap 中使用“推/拉”将帮助您在屏幕调整大小时按堆叠顺序重新定位元素...也许这就是您的意思？

全尺寸:
<强>|第 1 项 |第 2 项|

较小的尺寸:
<强>|第 1 项 |
<强>|第 2 项 |

Bootstrap 在这里讨论它:http://getbootstrap.com/css/#grid-column-ordering

如果是这种情况，此问题/答案也可能对您有所帮助: Bootstrap 3: Push/pull columns only on smaller screen sizes

我使用 foundation(不是 bootstrap)并在你简单地设置为类似于这个伪代码的框架中完成它:

<div id="item1" class="small-12-pull medium-12-pull large-6">lorem ipsum</div>
<div id="item2" class="small-12-push medium-12-push large-6">qwerty colec</div>