핸들바를 사용하여 배열을 반복할 때 반응형 Flex 속성 유지
P粉098417223
2023-09-02 23:45:35
<p>다음 코드가 있습니다(Handlebars를 사용하는 JSFiddle의 작업 코드). </p>
<pre class="brush:php;toolbar:false;"><div class="카드-컨테이너">
{{#각 this.card}}
<div
class="카드-컨테이너 컨테이너-col-inner col-12 col-md-6 col-lg-3"
>
<div class="image-card">
<div class="image-content">
<p class="제목">{{제목}}</p>
</div>
</div>
</div>
{{/각}}
<pre class="brush:php;toolbar:false;">{
"3columnLayout": 거짓,
"카드": [
{
"제목": "카드 1"
},
{
"제목": "카드 2"
},
{
"제목": "카드 3"
}
]
}</pre>
<p>기본적으로 카드 배열을 반복하고 각 항목에 대한 <code>카드 컨테이너</code> 그런 다음 부트스트랩을 사용하여 각 div에 CSS 클래스를 할당합니다(예: <code>col-md-6</code>). </p>
<li>모바일: 항목이 단일 열에 표시됩니다</li>
<li>태블릿: 항목이 2개의 열에 표시됩니다</li>
<li>데스크톱: 3개 열에 표시되는 항목</li>
</ul>
<p>이 모든 것이 예상대로 작동하며 시각적으로 원하는 UI를 제공합니다(카드 수에 관계 없음). 아래 예: </p>
<p>그러나 JSON에 표시된 것처럼 데스크톱이 4열 레이아웃에서 3열 레이아웃으로 전환되어야 하는지 여부를 결정하려면 개별 카드 수준 외부의 속성이 필요합니다. </p>
<p>카드 배열의 모든 카드에 대해 이 속성을 반복하고 싶지 않았기 때문에 코드 조각에 표시된 대로 코드를 재구성했습니다(핸들바 사용): https://jsfiddle.net/stcfa5wh/20/< /p >
<p>그러나 이는 이제 <code>3columnLayout</code> 값에 액세스할 수 있지만 HTML이 페이지에 덤프되고 더 이상 <code>col</code> 내가 하는 방식은 ;전에 완료했습니다. </p>
<p>예를 들어 태블릿에서는 각 <code>image-card</code> 너비를 50%로 설정할 수 있지만 행의 필요성은 무시됩니다. </p>
<p>최상위 속성(예: <code>3columnLayout</code>)을 구현하면서 HTML의 구조를 보존하는 방법을 제안할 수 있는 사람이 있습니까? </p>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
3열 레이아웃을 만들기 위해
3columnLayout标志时停止使用 Bootstrap。使用 Bootstrap，我们将在每列上使用类col-lg-4구현하려고 하면 왜 그런지 모르겠습니다. 따라서 각 열에 필요한 조건식은 다음과 같습니다.{{#if ../3columnLayout}}col-lg-4{{else}}col-lg-3{{/if}}.