如何不显示此 div 中单元格之间的划分？答案

【问题标题】：How can I dont show the divisions between cells in this divs?如何不显示此 div 中单元格之间的划分？
【发布时间】：2020-11-16 06:42:20
【问题描述】：

我在 Vue.js 中有一个简单的应用程序屏幕： Sample screen

我想隐藏单元格之间的这些划分，以一种连贯的方式。

我曾尝试将列的类更改为“col-md”和“col-sd”，但没有成功。

下面是应用的模板会话代码：

<template>
<div class="container">
  <h1> Animais </h1>
  <br>

    <div class="row">
        <div class="col-md-6">
            <h3>
                Animais Cadastrados
        <span class="badge badge-info">{{animais.length}}</span>
            </h3>
       
            <ul>
                <div class="row">
          <div class="col">
          Nome
          <li class="list-group-item"  v-for="animal in animais" v-bind:key="animal"> 
            {{animal.nome}}
          </li>
          </div>
          <div class="col"> 
          Idade
          <li class="list-group-item" v-for="animal in animais" v-bind:key="animal"> 
            {{animal.idade}}
          </li>
          </div>
          <div class="col"> 
          Raça
          <li class="list-group-item" v-for="animal in animais" v-bind:key="animal"> 
            {{animal.raca}}
          </li>
          </div>
          <div class="col"> 
          Informações
           <li class="list-group-item" v-for="animal in animais" v-bind:key="animal"> 
              <i @click="Show" class="fa fa-info-circle" aria-hidden="true"></i>
           </li>
          </div>
                </div>
            </ul>
        </div>
        <div class="col-md-6">
            <h3>
                h3. Lorem ipsum dolor sit amet.
            </h3>
            <p>
                Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. Phasellus eu sem sapien, sed vestibulum velit. Nam purus nibh, lacinia non faucibus et, pharetra in dolor. Sed iaculis posuere diam ut cursus. <em>Morbi commodo sodales nisi id sodales. Proin consectetur, nisi id commodo imperdiet, metus nunc consequat lectus, id bibendum diam velit et dui.</em> Proin massa magna, vulputate nec bibendum nec, posuere nec lacus. <small>Aliquam mi erat, aliquam vel luctus eu, pharetra quis elit. Nulla euismod ultrices massa, et feugiat ipsum consequat eu.</small>
            </p>
        </div>
    </div>
</div>
</template>

【问题讨论】：

如果网站是托管的，请提供指向该网站的链接。
它不是托管的，它在我的机器上。
本地项目？？
是的，我还在学习。我女朋友问我一个系统来控制她的动物疫苗。大声笑
如果我通过浏览器对象检查器打开站点，我会很容易做到这一点

标签： javascript html css vue.js bootstrap-4

【解决方案1】：

为了方便起见，您可以将生成的 HTML 复制到 JsFiddle 中。我试图猜测您要达到的目标，我认为您可以尝试类似的方法：

<div class="row"  v-for="animal in animais" v-bind:key="animal">
    <div class="col-md-3">{{animal.nome}}</div>
    <div class="col-md-3">{{animal.idade}}</div>
    <div class="col-md-3">{{animal.raca}}</div>
    <div class="col-md-3">
          <i @click="Show" class="fa fa-info-circle" aria-hidden="true"></i>
    </div>
</div>

再次，我不确定您要做什么，但在同一个数组上循环 4 次可能不是要走的路。是的，您可以将 Bootstrap 嵌套在另一行中。

【讨论】：