Блог

Я хочу изменить цвет фона одного столбца в строке начальной загрузки. Внутри строки также будет заполнение. Пожалуйста, обратитесь к приведенному ниже скриншоту требования.

     <div class="container event-details-wrapper">
      <div class="row">
        <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
      <h3 class="event-tag tooltip" tooltip="Click here to copy the event code" @click.stop="copyEvent($event)">#{{event.code}}</h3>
      <UserWidget :repeatEvent="true" :email="event.name" :title="event.duration" :action="goToEvent"/>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12" style="display:flex;">
      <div class="QnA-Details"></div>
      <div class="Sub-QnA-Details">
        <p>Qamp;A</p>
        <span>3000</span>
      </div>
      <div class="Form-Details"></div>
      <div class="Sub-Form-Details">
        <p>Forms</p>
        <span>06</span>
      </div>
      <div class="Polls-Details"></div>
      <div class="Sub-Polls-Details">
        <p>Polls</p>
        <span>02</span>
      </div>
      </div>
      <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
<div class="event-actions-wrapper" v-if="!isExpired">
      <ul>
        <li><div class="event-action download tooltip" tooltip="Project event" @click.stop="download"></div></li>
        <li><div class="event-action project tooltip" tooltip="Project event" @click.stop="project"></div></li>
        <li><div class="event-action phone tooltip" tooltip="Project event" @click.stop="phone"></div></li>
      </ul>
    </div>
      </div>
    </div>
    </div>
  

вот как выглядит мой код внутри этой модели. Когда я пытаюсь изменить цвет определенного столбца, область заполнения не окрашивается.

Как я должен достичь максимального требования, используя этот сценарий? Я использовал bootstrap, потому что он также должен быть адаптивным для мобильных устройств.

Основываясь на вашем коде, я устанавливаю непосредственно фон для последнего столбца, добавив, как показано ниже:

 style="background: red;"
  

И, похоже, он работает нормально. Если это не так, то, вероятно, нам не хватает некоторого css.

ИНФОРМАЦИЯ: Я только что добавил background :grey; строку для демонстрации

ДЕМОНСТРАЦИЯ:

 .row{
  background: grey;
}  

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C OGpamoFVy38MVBnE IbbVYUew OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU 6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV rV" crossorigin="anonymous"></script>

<div class="container event-details-wrapper">
  <div class="row">
    <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
      <h3 class="event-tag tooltip" tooltip="Click here to copy the event code" @click.stop="copyEvent($event)">#{{event.code}}</h3>
      <UserWidget :repeatEvent="true" :email="event.name" :title="event.duration" :action="goToEvent"/>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12" style="display:flex;">
      <div class="QnA-Details"></div>
        <div class="Sub-QnA-Details">
          <p>Qamp;A</p>
          <span>3000</span>
        </div>
        <div class="Form-Details"></div>
        <div class="Sub-Form-Details">
          <p>Forms</p>
          <span>06</span>
        </div>
        <div class="Polls-Details"></div>
        <div class="Sub-Polls-Details">
          <p>Polls</p>
          <span>02</span>
        </div>
      </div>
      <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12" style="background: red;">
        <div class="event-actions-wrapper" v-if="!isExpired">
          <ul>
            <li><div class="event-action download tooltip" tooltip="Project event" @click.stop="download"></div></li>
            <li><div class="event-action project tooltip" tooltip="Project event" @click.stop="project"></div></li>
            <li><div class="event-action phone tooltip" tooltip="Project event" @click.stop="phone"></div></li>
          </ul>
        </div>
      </div>
    </div>
  </div>  

Будет ли что-то вроде этого работать?

 <style>
.background {
  padding: 15px;  /* Just an example padding */
  background: lightgrey; /* Just an example color */
  background-clip: padding-box;  
}
</style>
  

Это background-clip: border-box; важная часть здесь. Это то, что заставляет цвет фона распространяться на границу области, на которую вы ориентируетесь. Вы также можете включить в него саму границу следующим образом:
background-clip: border-box;

И ниже я добавил класс background в div:

 <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 background">
  <div class="event-actions-wrapper" v-if="!isExpired">
      <ul>
        <li><div class="event-action download tooltip" tooltip="Project 
        event" @click.stop="download"></div></li>
        <li><div class="event-action project tooltip" tooltip="Project 
        event" @click.stop="project"></div></li>
        <li><div class="event-action phone tooltip" tooltip="Project event" 
        @click.stop="phone"></div></li>
      </ul>
  </div>
</div>