Question

我正在使用responsive API中的angular flex layout。尽管通常情况下一切正常，但有时我会遇到在整个代码中重复执行指令的情况。这是一个剥离的示例：

<div>

  <div ngClass.lt-md="mobile-cell">
    <span fxHide fxShow.lt-md="true" class="mobile-label">Text1</span>
  </div>

  <div ngClass.lt-md="mobile-cell">
    <span fxHide fxShow.lt-md="true" class="mobile-label">Text2</span>
  </div>

  <div ngClass.lt-md="mobile-cell">
    <span fxHide fxShow.lt-md="true" class="mobile-label">Text3</span>
  </div>

  ....

</div>

是否有一种优雅的方法（也许涉及纯CSS）来删除此重复项？例如，在断点被激活的情况下将mobile-cell类应用于所有同级对象？

Answer 1

如果<script> $(function(){ $(document).on('click','.edit_word',function(){ console.log("clicked"); }); }); </script>```类的所有直接子级都将具有insert_value="""$cont_full" | jq -r ".[].${nimble_ref}""" echo """$cont_full" | jq -r ".[].${nimble_ref}""" echo "Insert value: $insert_value"中的样式，则只需将其应用于父级一次，然后在CSS中，您可以定位所有.parent的直接子级{父.mobile-cell。

div

.mobile-cell

Answer 2

您的html

<div ngClass.lt-md="mobile-list">

    <div>
        <span fxHide fxShow.lt-md="true">Text1</span>
    </div>

    <div>
        <span fxHide fxShow.lt-md="true">Text2</span>
    </div>

    <div>
        <span fxHide fxShow.lt-md="true">Text3</span>
    </div>

    ....

</div>

您的CSS：

.mobile-list > div {
    /* mobile-cell css */
}
.mobile-list > div > span {
    /* mobile-label css */
}

角度弯曲布局-重复过多

2 个答案: