Можно ли добавить границу для col внутри отдельной строки с помощью начальной загрузки - PullRequest
Новая
       11

Можно ли добавить границу для col внутри отдельной строки с помощью начальной загрузки

0 голосов
/ 25 июня 2018

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

как это должно выглядеть:

но я получаю это:

Как видите, между рядами ужасная пропасть

мой код: jsFiddle HTML 

<div class="row">
    <div class="col-9">
        <h3 class="menu-dish">Chateau D'Armailhac Rothschild Pauillac 5-Eme G.C.C.</h3>France
    </div>
    <div class="col-3">
        <div class="row">
            <div class="col-6 price">
                123 usd
            </div>
            <div class="col-6 price">
                123 usd
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-9">
        <h3 class="menu-dish">Chateau D'Armailhac Rothschild Pauillac 5-Eme G.C.C.</h3>France
    </div>
    <div class="col-3">
        <div class="row">
            <div class="col-6 price">
                123 usd
            </div>
            <div class="col-6 price">
                123 usd
            </div>
        </div>
    </div>
</div>

CSS 

.price {
  border-left: 1px solid black;
  border-right: 1px solid black;
}
.price:first-child{
  border-left:none;
}
.price:last-child{
  border-right:none;
}

Ответы [ 2 ]

0 голосов
/ 25 июня 2018

Использовать h-100 для вложенных row

См. Определение размера в bootstrap-4: https://www.w3schools.com/bootstrap4/bootstrap_utilities.asp

.price {
  border-left: 1px solid black;
  border-right: 1px solid black;
}
.price:first-child{
  border-left:none;
}
.price:last-child{
  border-right:none;
}
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="row">
	<div class="col-9">
		<h3 class="menu-dish">Chateau D'Armailhac Rothschild Pauillac 5-Eme G.C.C.</h3>France
	</div>
	<div class="col-3">
		<div class="row h-100">
			<div class="col-6 price">
				123 usd
			</div>
			<div class="col-6 price">
				123 usd
			</div>
		</div>
	</div>
</div>
<div class="row">
	<div class="col-9">
		<h3 class="menu-dish">Chateau D'Armailhac Rothschild Pauillac 5-Eme G.C.C.</h3>France
	</div>
	<div class="col-3">
		<div class="row h-100">
			<div class="col-6 price">
				123 usd
			</div>
			<div class="col-6 price">
				123 usd
			</div>
		</div>
	</div>
</div>
0 голосов
/ 25 июня 2018

Я только что добавил 100% высоты к строке, которая находится внутри столбца. Надеюсь, вы искали это.Дай мне знать.

http://jsfiddle.net/sarojuid/uo92x6yt/

.row {
    min-height:100%;
}
...