是否可以使用引导程序将边框添加到单独行内的 col

Posted 2023-03-06

【中文标题】是否可以使用引导程序将边框添加到单独行内的 col

【英文标题】：Is it possible to add border to col inside separate row using bootstrap

【发布时间】：2018-12-04 00:00:31

【问题描述】：

我正在使用 bootstrap 的 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;

【问题讨论】：

你可以尝试将 height: 100% 添加到 col 内的行

【参考方案1】：

使用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>

【讨论】：

你们太棒了:)

【参考方案2】：

我刚刚为 col 内的行添加了 100% 的高度，希望您正在寻找这个。 让我知道。

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

.row 
    min-height:100%;