Показывать inline-flex, но сохранять полную ширину

-2

У меня есть два div внутри inline-flex div который уменьшает одну из двух разделов. Я использую bootstrap:

<section>
  <div class="container">
    <div class="flexx">
      <div class="foo">
        ....
      </div>
      <div class="col-md-10">
        <div class="card">
          <div class="card-block">
            ...
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

В принципе, класс foo должен быть встроен в col-md-10 который он выполняет, но col-md-10 становится маленьким, но он все равно должен быть на уровне 100%. Правильно ли я делаю это? Я не силен css/scss.

Теги:
flexbox

1 ответ

0
Лучший ответ

Я не уверен, что полностью понимаю вашу проблему. Элементы inline-flex по умолчанию не имеют полной ширины. Вам нужно будет добавить css для того, чтобы это произошло, поскольку в css для начальной загрузки свойство flex-grow установлено в 0;

Я думаю, что добавление одного стиля и класса будет исправлять вашу проблему, если я правильно понимаю вас.

// to your html
<div class="col foo">
    ....
</div>


// to your css
[class^="col"] {
   flex-grow: 1;
}

Проверьте эту ручку на помощь

Поделиться
  • 0
    Вот так, но не уверен, почему это не работает для меня. Позвольте мне проверить мой CSS.
  • 0
    В моем коде я предполагаю много, имя авто-префикса. Если вы не используете обработчик задач, вам нужно записать разные префиксы браузера.
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню