Удаление границ со складных загрузочных карточек

У меня есть набор карточек, которые открываются кнопкой на моем сайте. Когда я раскрываю их, карты (информация, которую я пытаюсь отобразить) имеют маленькая серая рамка вокруг них. Я хотел бы удалить эту границу, но настройка border: none; в моем CSS не делает этого.

К вашему сведению: я использую 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.

Sean 08.04.2019 21:26

Я только что попытался добавить style = "border:none;" на <div class = "card card-body"> и границы больше нет. Я думаю, что ваш браузер кэшировал ваш файл CSS. Попробуйте очистить браузер и сообщите нам.

danny bee 08.04.2019 21:31

Просто из любопытства, что привело к тому, что мой пост был отклонен? Я предпочел бы понять, почему мой вопрос непродуктивен, чем просто узнать, что это так.

questionable_code 08.04.2019 22:33
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
1
3
2 940
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Это может быть ваш кеш не очищается. Если нет, вы можете попробовать это и посмотреть, поможет ли это:

.card {
    border: 0;
}

или:

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

Для протокола, я сделал обе вещи. Добавление CSS было необходимо. Я не думаю, что добавил border: 0 в нужном месте.

questionable_code 08.04.2019 22:35

Я удалил рамку и серую линию вокруг кнопки навыков, это происходит по событию клика.

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

Другие вопросы по теме