Question

我正在尝试更改新Opencart 2.0模板中的div订单，以便在使用较小屏幕时，产品说明上方会显示“添加到购物车”按钮。

这是我尝试的但似乎无法正常工作

CSS：

@media screen and (max-width:767px){
    #parent{
        display:flex;
        flex-flow: column;
    }
    #a{order:1;}
    #b{order:3;}
    #c{order:4;}
    #d{order:5;}
    #e{order:2;}
}

HTML：

 <div id="parent">

   <div class="col-sm-8">
      <ul class="thumbnails" id="a"></ul>
      <ul class="nav nav-tabs" id="b"></ul>
      <div class="tab-content" id="c"></div>
   </div>

   <div class="col-sm-4" id="d">
      <div class="main-product-info" id="e"></div>
   </div>

 </div>

基本上main-product-info div需要超过nav-tabs导航。

此外，我尝试将父div放在col-sm-8下方，但页面全部搞砸了......

任何建议都非常感谢！

谢谢！

Answer 1

您只需使用jQuery函数即可完成此操作：append（）;之前（）;后（）;

首先，获取窗口宽度：

var screenWidth = $(window).width();

第二，创造条件：

 if (screenWidth <= 767) {
         $('#b').before($('#e'));
        } else {
    return false;}

多数人。

Answer 2

您可以尝试通过JavaScript动态添加这些内容。您可以为每个对象创建一个构造函数，如果大小小于某些边界，则以不同的顺序移动/添加它们。

Here，您可以找到一个答案，介绍如何通过JavaScript创建和设置div。然后，您可以通过appendchild(child)将它们添加到父div（您可以选择构建或只是查找）。

我希望有所帮助！

Answer 3

使用flex这几乎感觉有点矫枉过正。

更容易理解的其他选项是将父级显示为表格，将nav显示为表格页脚，将main-product-info显示为table-header。这将实现这一目标。

您还可以交换导航和主要产品信息div的顺序（我为示例添加了id =“nav”）

<div id="parent">
    <div class="col-sm-4" id="d">
        <div class="main-product-info" id="e"></div>
    </div>
   <div class="col-sm-8" id="nav">
       <ul class="thumbnails" id="a"></ul>
       <ul class="nav nav-tabs" id="b"></ul>
      <div class="tab-content" id="c"></div>
   </div>
</div>

并向右浮动id =“d” 像

这样的东西

#d {
    float:right;
}
#nav {
    float:left;
}

确保d和nav占用适当的空间，其中css样式的box-sizing：border-box;可能有帮助，因为它包含宽度样式中的边框和填充，但不包括边距，而不是在宽度样式中不包括这三个。只要它们的总宽度不超过父母，它们就应该漂浮得很好。

编辑：我还要注意，虽然我不知道flex是如何工作的，但我相当积极的你不能重新排序div内的div，这样他们就不再在那些div中，你可能无法将E移出D喜欢你试试。但是你可以尝试为你的div class =“col-sm-8”分配一个ID，然后重新排序那个和D就像这样。

<div class="col-sm-8" id="nav">

和css

#nav{order:2;}
#d{order:1}

这可能是您的个人问题。但我再也不知道flex是如何工作的，还没有用过它。

Answer 4

如果您正在使用Bootstrap（并且我怀疑您可能基于col-*类的使用），那么您可以使用column ordering push和pull执行此操作Bootstrap中的类。

Here is a jsFiddle example。如果您调整结果框的大小，那么当＆＃34;产品信息非常小时＃34;是最重要的，一旦足够广泛，＆＃34;产品信息＆＃34;在列的右侧。

我的jsFiddle中的示例HTML是：

<div id="parent">
  <div class="container-fluid">
    <div class="row">

      <div class="col-sm-push-8 col-xs-12 col-sm-4" id="d">
        <div class="main-product-info" id="e">product info</div>
      </div>

      <div class="col-xs-12 col-sm-pull-4 col-sm-8" id="nav">
        <ul class="thumbnails" id="a">thumbnails</ul>
        <ul class="nav nav-tabs" id="b">nav tabs</ul>
        <div class="tab-content" id="c">tab content</div>
      </div>

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

在较小的屏幕上更改div顺序

4 个答案: