Question

.latestQuestions{
	height: 400px;
}

.latestQuestions .row{
	box-sizing: border-box;
}

<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>

<div class="bg-info latestQuestions container">
    Latest Questions
    <div class="bg-primary h-100 row">
        <div class="col-sm">col1</div>
        <div class="col-sm">col2</div>
        <div class="col-sm">col3</div>
    </div>
</div>
<p>OK</p>

我在<div>内有一行，当我将背景色添加到该行时，它会从<div>垂直溢出。我用谷歌搜索解决方案，所有解决方案都与水平溢出有关。我已经使用了BootStrap最新版本。

我尝试在外部div中使用box-sizing: border-box;，并尝试使用class="container"（仅有助于水平溢出）。

.latestQuestions {
  height: 400px;
}

.latestQuestions .row {
  box-sizing: border-box;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div class="bg-info latestQuestions container">
  Latest Questions
  <div class="bg-primary h-100 row">
    <div class="col-sm">col1</div>
    <div class="col-sm">col2</div>
    <div class="col-sm">col3</div>
  </div>
</div>
<p>OK</p>

enter image description here您可以看到

OK

位于行的颜色内。我想要它在该行的外面和下面。

Answer 1

将容器设为弹性列，然后将flex:1应用于行（删除h-100）。

有Bootstrap类flex-column等可以帮助解决这个问题。

.latestQuestions {
  height: 200px;
  /* adjusted for demo */
  display: flex;
  flex-direction: column
}

.latestQuestions .row {
  box-sizing: border-box;
  flex: 1;
}

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>

<div class="bg-info latestQuestions container">
  Latest Questions
  <div class="bg-primary row">
    <div class="col-sm">col1</div>
    <div class="col-sm">col2</div>
    <div class="col-sm">col3</div>
  </div>
</div>
<p>OK</p>

Answer 2

删除h-100代表height: 100%的区块

.latestQuestions{
	height: 400px;
}

.latestQuestions .row{
	box-sizing: border-box;
}

<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>

<div class="bg-info latestQuestions container">
    Latest Questions
    <div class="bg-primary row">
        <div class="col-sm">col1</div>
        <div class="col-sm">col2</div>
        <div class="col-sm">col3</div>
    </div>
</div>
<p>OK</p>

为什么该行会从div垂直溢出？

2 个答案: