【问题标题】:Removing Borders from Collapsible Bootstrap Cards从可折叠引导卡中删除边框
【发布时间】:2019-08-30 00:16:33
【问题描述】:

我有一组通过我网站上的按钮显示的卡片。当我展示它们时,卡片(我试图显示的信息)周围有一个灰色小边框。我想删除这个边框,但是在我的 CSS 中设置 border: none; 并没有这样做。

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

代码:

    <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>

图片:

【问题讨论】:

  • 您使用什么选择器将边框设置为none?它需要比 Bootstrap 使用的选择器更具体。
  • 我刚刚尝试添加 style="border:none;"到
    并且边框消失了。我认为您的浏览器缓存了您的 CSS 文件。尝试清除您的浏览器并告诉我们。
  • 只是出于好奇,是什么导致我的帖子被否决?我宁愿能够理解为什么我的问题没有成效,也不愿让自己知道它是有成效的。

标签: css html sass bootstrap-4


【解决方案1】:

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

.card {
    border: 0;
}

或:

<div class="card border-0">...</div>

【讨论】:

  • 为了记录,我做了这两件事。 CSS 添加是必要的。我认为我没有在正确的位置添加 border: 0
【解决方案2】:

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

.card.card-body{ border:none; }

 .btn-primary.focus, .btn-primary:focus { box-shadow:unset !important;}
 
 .btn.focus, .btn:focus{ box-shadow:unset !important;}
<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>

【讨论】:

    猜你喜欢
    相关资源
    最近更新 更多
    热门标签