Блог

Главная - Вопросы по программированию - Система столбцов начальной загрузки

Система столбцов начальной загрузки

#html #css #bootstrap-4

#HTML #css #bootstrap-4

Вопрос:

Заранее спасибо за вашу помощь!

Я работаю в bootstrap 4, создавая веб-сайты, я пытаюсь создать следующий дизайн:

введите описание изображения здесь

Я не могу понять, как это будет работать! На данный момент у меня для всего поля установлено значение container-fluid, поэтому не применяются никакие отступы / поля, но я не понимаю, как я могу структурировать столбцы, чтобы заставить их работать.

Вот мой HTML для того, что я пробовал до сих пор:

                  <div class="container-fluid">
                  <div class="row">
                    <div class="col-12">
                      <h3 class="mega-menu-heading">About</h3>
                    </div>
                        <div class="col-sm-3 g-pa-0">
                          <ul class="list-unstyled style-list">
                            <li class="serviceAbout"><a href="[insert]" title="[insert]">[insert] </a></li>
                            <li class="serviceAbout"><a href="[insert]" title="[insert]">[insert]</a></li>
                          </ul>
                        </div>
                        <div class="col-sm-3 g-pa-0">
                          <ul class="list-unstyled style-list">
                            <li class="serviceAbout"><a href="[insert]" title="[insert]">[insert] </a></li>
                            <li class="serviceAbout"><a href="[insert]" title="[insert]">[insert] </a></li>
                          </ul>
                        </div>
                        <div class="col-sm-3 g-pa-0">
                          <ul class="list-unstyled style-list">
                            <li class="serviceAbout"><a href="[insert]" title="[insert]">[insert] </a></li>
                            <li class="serviceAbout"><a href="[insert]" title="[insert]">[insert] </a></li>
                          </ul>
                        </div>  
                        <div class="col-sm-3 g-pa-0">
                          <img class="img-responsive g-pa-0 g-ma-0" src="/assets/images/misc/nav-image.jpg">
                        </div>                                
                  <!--/end row--> 
                </div>
                </div>

Я понимаю, что col-12 занимает все доступное пространство в контейнере, поэтому у меня не может быть изображения на всю высоту контейнера, но я не уверен, каким другим способом я могу это сделать.

Любая помощь будет оценена, это должно быть возможно, я, вероятно, просто что-то упускаю!

Спасибо,

Ответ №1:

Вы могли бы создать первую строку, содержащую 2 столбца: col-sm-9 и col-sm-3 .

Затем создайте еще одну строку в col-sm-9 списке ваших служб и используйте col-sm-3 для отображения вашего изображения.

 div {
  text-align: center;
  background-color: rgba(86,61,124,.15);
  border: 1px solid rgba(86,61,124,.2);
}

.bgimg {
  background-image: url('https://mdn.mozillademos.org/files/7693/catfront.png');
  background-size: contain;
  background-repeat: no-repeat;
} 
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-9">
      <div class="row">
        <div class="col-sm-12">Our services</div>
        <div class="col-sm-4">Service 1</div>
        <div class="col-sm-4">Service 2</div>
        <div class="col-sm-4">Service 3</div>
        <div class="col-sm-4">Service 4</div>
        <div class="col-sm-4">Service 5</div>
        <div class="col-sm-4">Service 6</div>
      </div>
    </div>
    <div class="col-sm-3 bgimg">
      Image full-height
    </div>
  </div>
</div>

Ответ №2:

Вы можете использовать системы сетки начальной загрузки. Используйте шаблон контейнера, строки и столбца.

Чтобы лучше понять это, перейдите по этой ссылке.

Попробуйте эту структуру кода:

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">

<div class="container text-center">
  <div class="row">
    <div class="col-9">
      <div class="row">Our Services</div>
      <div class="row">
        <div class="col-4">Service 1</div>
        <div class="col-4">Service 2</div>
        <div class="col-4">Service 3</div>
      </div>
      <div class="row">
        <div class="col-4">Service 4</div>
        <div class="col-4">Service 5</div>
        <div class="col-4">Service 6</div>
      </div>
    </div>
    <div class="col-3">
      <img src="https://source.unsplash.com/100x100/?documents" class="img" alt="img">
    </div>
  </div>
</div>

Метки: