Блог

Я работаю над макетом bootstrap 4, 4 столбца. Я начинаю всего с 3 столбцов. У меня есть внешний контейнер div и внутренняя строка с 3 столбцами. Когда я добавляю границы ко всем контейнерам, я вижу, что строка не сгибается, чтобы заполнить весь div родительского контейнера. Я перепробовал ряд свойств CSS, и я просто не могу понять, почему он не растягивается, чтобы соответствовать родительскому контейнеру. В идеале я хотел бы, чтобы ширина центрального столбца составляла 100% минус процент суммы двух других столбцов (в которых есть изображения стрелок). Проверьте jsfiddle, чтобы увидеть код и результирующий рендеринг.

(в основном) Полный код:

https://jsfiddle.net/ukd5stc0/

Пример кода, требуемый stackoverflow:

 <div class="container touchpointContainer"&&t;
  <div class="row tall wide"&&t;
    <div class="col-1 centerVertically"&&t;
      <a onclick="advanceReview(-1)"&&t;
        <im& class="prev" src="leftArrow.pn&"/&&t;
      </a&&t;
    </div&&t;
    <div class="col-10 centerVertically mainText"&&t;
      "Lorem ipsum dolor sit amet, consectetur adipiscin& elit, sed do eiusmod tempor incididunt ut labore et dolore"
    </div&&t;
    <div class="col-1 centerVertically"&&t;
      <a onclick="advanceReview(1)"&&t;
        <im& class="next" src="ri&htArrow.pn&"/&&t;
      </a&&t;
    </div&&t;
  </div&&t;
  

wide Класс придает строке значение width:100% , а строки обычно шире 100% из-за того, что для левого и правого полей установлено значение -15px . Уберите широкий класс, и у вас все будет хорошо.