如何将产品的行拉伸到最大？

Question

我在 Nuxt.js (Vue.js) 应用程序上工作，该应用程序使用 BootstrapVue（基于 Bootstrap）包。

目前情况如下：

代码如下所示：

<template lang="pug">
  b-container
    b-row
      b-col(:cols="8")
        b-container
          b-row
            b-list-group
              b-list-group-item.flex-column.align-items-start(
                v-for="(item, index) in 7" :key="index"
                href='#'
              )
                b-container
                  b-row
                    b-col(:cols="1").d-flex.align-items-center.justify-content-center
                      b-form-checkbox {{ index + 1 }}
                    b-col(:cols="11")
                      basket-item(:itemNumber="index + 1" :checkStatus="accepted")
          b-row.style-row-middle
            b-button.close(type='button' aria-label='Close' @click="onClose()")
              span(aria-hidden='true') &times;
                u Удалить выбранное
            b-button(type='button' @click="onContinue()").btn.btn-lg.buy__button Продолжить покупки
          b-row
            div
              hr
              | * доставка будет осуществлена из Санкт-Петербурга;
              br
              | * наш менеджер свяжется с вами сразу после обработки заказа;
      b-col(:cols="4" class="col2")
        form(ref='form' @submit.stop.prevent='handleSubmit').set-padding
          div
            strong
              label ЗАКАЗ
          div
            strong
              label Всего товаров: 1
          div
            strong
              label На суму: 100 000 р
          b-form-group(label='')
          b-form-group(label='Телефон' label-for='type-tel' invalid-feedback='Phone is required')
            b-form-input(id="type-tel" type="tel" v-model='phone' required)
          b-form-group(label='E-mail' label-for='type-email' invalid-feedback='E-mail is required')
            b-form-input(id="type-email" type="email" v-model='email' required)
          b-form-group(label='Ваше имя' label-for='name-input' invalid-feedback='Name is required' :state='nameState')
            b-form-input(:id="name-input" v-model='name' :state='nameState')

          div.d-flex.align-items-center.justify-content-center
            b-button(type='submit' variant='primary' size="lg") Оформить заказ
</template>

<style lang="sass">
.list-group
  margin-bottom: 10px
  max-height: 400px
  -webkit-overflow-scrolling: touch
  overflow-y: auto
.list-group-item
  border-style: none
.set-padding
  padding-bottom: 7px
  padding-top: 7px
.style-row
  border: solid 1px black
  display: flex
  justify-content: space-between
.style-row-middle
  display: flex
  justify-content: space-between
  padding: 4px
.col1
  border: 1px solid red
.col2
  border: 10px solid rgb(0, 70, 140)
.buy__button
  background-color: #eee
  background-image: -webkit-linear-gradient(bottom, #ccc 0%, #eee 100%)
  border: 1px solid #cccccc
  color: black
  font-size: 16px
  text-shadow: 0.5px 0.866px 0 white
.set-border
  border: 1px solid gray
  border-radius: 3px
  margin-bottom: 2px
  margin-top: 2px
</style>

我需要将产品的行拉伸到最大，但我不确定该怎么做。

Answer 1

屏幕截图显示 .list-group-item 中的填充可以减少到 2px:

.list-group-item
  padding: 2px

此外，.list-group 应占据行中可用的完整宽度：

.list-group
  width: 100%

demo

如何将产品的行拉伸到最大？

How to stretch product's rows to maximum?

vue.js

bootstrap-4

nuxt.js

bootstrap-vue