загрузочный макет из четырех коробок с полем - PullRequest
Новая
       0

загрузочный макет из четырех коробок с полем

0 голосов
/ 03 октября 2018

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

Я попробовал следующее, но в ячейках нет места между ними, и он не отображается должным образом.

<div class="row  justify-content-center">
                        <div class="col-4 colMenu">
                             <h3>SAMPLE TEXT</h3>
                            <img src="./assets/img/sample.png"
class="menuImg">
                        </div>
                        <div class="col-4 colMenu ">
                                <h3 >SAMPLE TEXT</h3>
                               <img src="./assets/img/sample.png" class="menuImg">
                           </div>

                        <div class="w-100"></div>

                        <div class="col-4 colMenu ">
                        <h3>SAMPLE TEXT</h3>
                        <img src="./assets/img/sample.png" class="menuImg">
                           </div>
                           <div class="col-4 colMenu">
                                <h3 >SAMPLE TEXT</h3>
                               <img src="./assets/img/sample.png" class="menuImg">
                           </div>
                      </div>



.colMenu{
      border-style: solid;
      border-width: 3px;
      border-color: #000000;
  }

  .menuImg{
    height: 40%;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }

enter image description here

Ответы [ 3 ]

0 голосов
/ 03 октября 2018

Вам нужно добавить поля в каждом поле, так как граница игнорирует заполнение.

.colMenu {
  border-style: solid;
  border-width: 3px;
  border-color: #000000;
  margin: 0 0 10px 10px;
}
0 голосов
/ 12 октября 2018

Я не уверен, какое место вам понадобилось между коробками?Если да, тогда вам нужно применить функцию calc(), чтобы добиться ее для col-4 Я предполагал, что вы использовали последнюю версию Bootstrap: 

.colMenu{
  border-style: solid;
  border-width: 3px;
  border-color: #000000;
  width: calc(33.333333% - 30px); /* 30px of combined 2 side margin 15+15 = 30
  margin:15px; /* Applied margin */
}

Но имейте в виду, что для отзывчивого просмотра вы должны изменить соответствующим образом. 

<!DOCTYPE html>
<html>
<head>
	<title>Modal</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<style type="text/css">
	.colMenu{
	border-style: solid;
	border-width: 3px;
	border-color: #000000;
	width: calc(33.333333% - 30px);
	margin:15px;
	}
	
	.menuImg{
	height: 40%;
	margin-left: auto;
	margin-right: auto;
	display: block;
	}
    </style>
</head>
<body>
<div class="row  justify-content-center">
<div class="col-4 colMenu">
     <h3>SAMPLE TEXT</h3>
    <img src="https://via.placeholder.com/150x150"
class="menuImg">
</div>
<div class="col-4 colMenu ">
        <h3 >SAMPLE TEXT</h3>
       <img src="https://via.placeholder.com/150x150" class="menuImg">
   </div>

<div class="w-100"></div>

<div class="col-4 colMenu ">
<h3>SAMPLE TEXT</h3>
<img src="https://via.placeholder.com/150x150" class="menuImg">
   </div>
   <div class="col-4 colMenu">
        <h3 >SAMPLE TEXT</h3>
       <img src="https://via.placeholder.com/150x150" class="menuImg">
   </div>
</div>
</body>
</html>
0 голосов
/ 03 октября 2018

Что вы пытаетесь сделать здесь?Хотите, чтобы ваш код делал то, что вы показываете на своем изображении?

Сначала я думаю, что вы ошибаетесь, пытаясь смешать правила начальной загрузки и жестко запрограммированные CSS.А для чего <div class="w-100"></div>?

Хотите, чтобы 2x2 блока или 4 блока отображались в строке?

Для первого случая вам понадобится код: 

 <div class="row">
      <div class="col-md-6 colMenu">
           <h3>SAMPLE TEXT</h3>
           <img src="./assets/img/sample.png" class="menuImg">
       </div>
       <div class="col-md-6 colMenu">
            <h3 >SAMPLE TEXT</h3>
            <img src="./assets/img/sample.png" class="menuImg">
       </div>
       <div class="col-md-6 colMenu">
            <h3>SAMPLE TEXT</h3>
            <img src="./assets/img/sample.png" class="menuImg">
       </div>

       <div class="col-md-6 colMenu">
            <h3 >SAMPLE TEXT</h3>
            <img src="./assets/img/sample.png" class="menuImg">
       </div>
 </div>

Во втором случае вам нужно заменить col-md-6 на col-md-3 следующим образом: 

<div class="row">
      <div class="col-md-3 colMenu">
           <h3>SAMPLE TEXT</h3>
           <img src="./assets/img/sample.png" class="menuImg">
       </div>
...

Теперь, если вы хотите, чтобы он был центрирован и меньше, вам нужноиграть со смещением и уменьшить размер.Для первого примера у вас будет <div class="col-md-offset-1 col-md-5"> и <div class="col-md-offset-5 col-md-5"> или что-то вроде этого;)

https://getbootstrap.com/docs/4.0/layout/grid/#offset-classes

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...