Question

嘿伙计们这是this question的增强功能。

我只是在如何在bootstrap 4中完成下面的布局。我需要的主要内容是col 1，col 2和col3需要到各自行的底部。它们需要是嵌套列，但引导程序4似乎不会填充父行高。请帮忙。以Here's a CodePen为例。我希望codepen中的红色覆盖黄色。提前谢谢。

let playerScore = 0;
let compScore = 0;
let draw;






/* Players Choice */
  function round() {
  let userInput = prompt('Rock, Paper, or Scissor?: ');
  console.log(userInput);

  if (userInput == 'rock'){
    console.log(userInput = 1);
  } else if (userInput == 'paper'){
    console.log(userInput = 2);
  } else if (userInput == 'scissor'){
    console.log(userInput = 3);
  }


/* Computers Choice */
  let compMove = Math.floor(Math.random()*3) + 1;
  console.log(compMove);

  if (compMove == 1) {
    alert('Rock!');
  } else if (compMove == 2){
    alert('Paper!');
  } else if (compMove == 3){
    alert('Scissor!');
  }

return {
  compMove,
  userInput
};

};




/* Compare */
function result(compMove, userInput) {
  if (compMove == 2 && userInput == 1) {
    alert('You lose!');
    compScore += 1;
  } else if (compMove == 3 && userInput == 1){
    alert('You Win!');
    playerScore += 1;
  } else if (compMove == 1 && userInput == 2){
    alert('You Win!');
    playerScore += 1;
  } else if (compMove == 1 && userInput == 3){
    alert('You Lose!')
    compScore += 1;
  } else if (compMove == userInput){
    compScore;
    playerScore;
  }

  return {
    compScore,
    playerScore
  };
}



function game() {
  for (let i=1; i <= 5; i++) {
  let roundNumber = round();
  result(roundNumber.compMove, roundNumber.userInput);
  console.log(result(compScore, playerScore));

};

return {
  compScore,
  playerScore
};

};


console.log(game());

if (playerScore > compScore) {
  alert('You Won the Best of 5!');
} else if (playerScore < compScore) {
  alert('You Lost.')
} else {
  alert('It is a Draw!');
}

Answer 1

在这种情况下，您唯一需要的是将h-100类（高度：100％）添加到行中。

这是工作代码：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<style>
    .container {
        background: green;
    }

    .col-md-3 {   
        background: pink;
    }
    .col-md-9 {
        background: yellow;  	
    }
    .col-md-4 {
        background: red;
    }
</style>

<div class="container">
   header
    <div class="row">
        <div class="col-md-3">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has </div>
        <div class="col-md-9">
            <div class="row h-100">
                <div class="col-md-4">col2 - 1</div>
                <div class="col-md-4">col2 - 2</div>
                <div class="col-md-4">col2 - 3</div>
            </div>
            col2
        </div>
    </div>
</div>

Bootstrap 4两列全高

1 个答案: