Bootstrap гармошка не работает, если ID номер

Question

У меня проблемы после обновления Bootstrap до версии 4.2.1. В этой версии, когда я использую id="#12" в accordion, это не работает. В предыдущих версиях он работал нормально с id="#12". Есть идеи?

  <div id="accordion">
    <div class="card">
  <div class="card-header" id="headingOne">
     <h5 class="mb-0">
        <button class="btn btn-link" data-toggle="collapse" data-target="#12"
           aria-expanded="true" aria-controls="collapseOne">
        Collapsible Group Item #1
        </button>
     </h5>
  </div>
  <div id="12" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
     <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
        richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard
        dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf
        moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla
        assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore
        wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
        vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic
        synth nesciunt you probably haven't heard of them accusamus labore
        sustainable VHS.
     </div>
  </div>

Answer 1

Идентификатор должен начинаться с буквы.

Из инструментов разработки Google:

С https://developer.mozilla.org:

Использование символов, кроме букв ASCII, цифр, '_', '-' и '.' может вызвать проблемы совместимости, так как они не были разрешены в HTML 4. Хотя это ограничение было снято в HTML 5, идентификатор должен начинаться с письмом для совместимости.

Также полезный вопрос, чтобы проверить здесь: Какие допустимые значения для атрибута id в HTML? .

Если вам нужно использовать числа, попробуйте сделать что-то вроде этого:

#d12 or #d-12

Answer 2

В то время как в HTML 5 допустимо начинать идентификатор с цифры, CSS не допускает начальные цифры.

В CSS идентификаторы (включая имена элементов, классы и идентификаторы в селекторы) могут содержать только символы [a-zA-Z0-9] и ISO 10646 символы U + 00A0 и выше, плюс дефис (-) и подчеркивание (_); они не могут начинаться с цифры, двух дефисов или дефиса цифрой. Идентификаторы также могут содержать экранированные символы и любые Символ ISO 10646 в виде числового кода (см. Следующий пункт). Например, идентификатор «B & W?» может быть записан как «B \ & W \?» или «B \ 26 W \ 3F».

Внутренне, Bootstrap 4 использует

getSelectorFromElement(element) {
    let selector = element.getAttribute('data-target')

    if (!selector || selector === '#') {
      const hrefAttr = element.getAttribute('href')
      selector = hrefAttr && hrefAttr !== '#' ? hrefAttr.trim() : ''
    }

    try {
      return document.querySelector(selector) ? selector : null
    } catch (err) {
      return null
    }
  }

Чтобы найти ваш элемент. querySelector требуется действительный селектор CSS

DOMString, содержащая один или несколько селекторов для сопоставления. Эта строка должна быть допустимой строкой селектора CSS; если это не так, SYNTAX_ERR исключение.

Я бы рекомендовал использовать только действительный идентификатор CSS. Есть также трюки, которые вы можете сделать, чтобы убежать, но если вам не нужно, просто используйте другой селектор