首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >从可折叠Bootstrap卡中删除边框

从可折叠Bootstrap卡中删除边框
EN

Stack Overflow用户
提问于 2019-04-09 03:17:16
回答 2查看 2.6K关注 0票数 1

我有一套卡片,可以通过我的网站上的一个按钮显示出来。当我展示它们时,卡片(我试图显示的信息)周围有一个小灰色边框。我想移除这个边框,但是在我的CSS中设置border: none;并不能做到这一点。

仅供参考:我正在使用Bootstrap 4.3.1 (通过CDN)。

代码:

代码语言:javascript
复制
    <div id="skills" class="showcase-buttons">
      <button type="button" class="btn btn-primary btn-block" 
        data-toggle="collapse" href="#skills-showcase" aria-expanded="false"
        aria-controls="skills-showcase">
        Skills
      </button>

      <!-- collapsible content (skills) -->
      <div id="skills-showcase" class="collapse showcase-content justified-text">
        <div class="row justify-content-around">
          <div class="col-md-4">
            <div id="computer-skills">
              <div class="card card-body">
                <h3>Computer</h3>
                <p>
                  We'll put some happy little leaves here and there. If we're going to
                  have animals around we all have to be concerned about them and take
                  care of them. As trees get older they lose their chlorophyll. This
                  present moment is perfect simply due to the fact you're experiencing
                  it. Let's make some happy little clouds in our world.
                </p>
              </div>
            </div>
          </div>
          <div class="col-md-4">
            <div id="design-skills">
              <div class="card card-body">
                <h3>Design</h3>
                <p>
                  Put it in, leave it alone. Just let go - and fall like a little
                  waterfall. The more we do this - the more it will do good things to
                  our heart. Nature is so fantastic, enjoy it. Let it make you happy.
                  Trees grow in all kinds of ways. They're not all perfectly straight.
                  Not every limb is perfect. There are no limits in this world.
                </p>
              </div>
            </div>
          </div>
          <div class="col-md-4">
            <div id="problem-solving-skills">
              <div class="card card-body">
                <h3>Problem Solving</h3>
                <p>
                  If these lines aren't straight, your water's going to run right out of
                  your painting and get your floor wet. And I will hypnotize that just a
                  little bit. You need the dark in order to show the light. We don't
                  really know where this goes - and I'm not sure we really care. I get
                  carried away with this brush cleaning.
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

图片:

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-04-09 03:35:26

可能是你的缓存没有被清除。如果没有,你可以试试这个,看看它是否有效:

代码语言:javascript
复制
.card {
    border: 0;
}

或者:

代码语言:javascript
复制
<div class="card border-0">...</div>
票数 1
EN

Stack Overflow用户

发布于 2019-04-09 03:51:07

我已经删除了技能按钮周围的边框和灰色线条,它发生在单击事件。

代码语言:javascript
复制
.card.card-body{ border:none; }

 .btn-primary.focus, .btn-primary:focus { box-shadow:unset !important;}
 
 .btn.focus, .btn:focus{ box-shadow:unset !important;}
代码语言:javascript
复制
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    
<div id="skills" class="showcase-buttons">
      <button type="button" class="btn btn-primary btn-block" 
        data-toggle="collapse" href="#skills-showcase" aria-expanded="false"
        aria-controls="skills-showcase">
        Skills
      </button>

      <!-- collapsible content (skills) -->
      <div id="skills-showcase" class="collapse showcase-content justified-text">
        <div class="row justify-content-around">
          <div class="col-md-4">
            <div id="computer-skills">
              <div class="card card-body">
                <h3>Computer</h3>
                <p>
                  We'll put some happy little leaves here and there. If we're going to
                  have animals around we all have to be concerned about them and take
                  care of them. As trees get older they lose their chlorophyll. This
                  present moment is perfect simply due to the fact you're experiencing
                  it. Let's make some happy little clouds in our world.
                </p>
              </div>
            </div>
          </div>
          <div class="col-md-4">
            <div id="design-skills">
              <div class="card card-body">
                <h3>Design</h3>
                <p>
                  Put it in, leave it alone. Just let go - and fall like a little
                  waterfall. The more we do this - the more it will do good things to
                  our heart. Nature is so fantastic, enjoy it. Let it make you happy.
                  Trees grow in all kinds of ways. They're not all perfectly straight.
                  Not every limb is perfect. There are no limits in this world.
                </p>
              </div>
            </div>
          </div>
          <div class="col-md-4">
            <div id="problem-solving-skills">
              <div class="card card-body">
                <h3>Problem Solving</h3>
                <p>
                  If these lines aren't straight, your water's going to run right out of
                  your painting and get your floor wet. And I will hypnotize that just a
                  little bit. You need the dark in order to show the light. We don't
                  really know where this goes - and I'm not sure we really care. I get
                  carried away with this brush cleaning.
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/55580350

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档