1
私は数日前にブートストラップを学び始めましたが、今は自分のウェブサイトを構築しようとしていますが、私はレイアウトに悩まされています。ブートストラップ付きのコラムで縮まった
私はこのような何かを取得しようとしている：
をしかし、私はこれにこだわっている：
ここでは私のコードです：
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Title</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</head>
<body>
<div class="container-fluid">
<div class = "row">
<div class="col-md-4 h-50" style="background:blue;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque id semper turpis. Donec suscipit nibh eget ante consequat, nec scelerisque massa semper. Nulla eros tortor, viverra semper nisi placerat, pharetra fermentum lac</p>
</div>
<div class="col-md-8" style="background:red;">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque id semper turpis. Donec suscipit nibh eget ante consequat, nec scelerisque massa semper. Nulla eros tortor, viverra semper nisi placerat, pharetra fermentum lacus. Aenean eu elit id tortor porttitor vehicula. Etiam ac risus pretium, lacinia nibh sed, posuere orci. Nam consequat orci sed pharetra condimentum. Morbi ultricies viverra lorem, ac pellentesque ante aliquet sed. Duis iaculis interdum quam vitae tincidunt. Suspendisse volutpat euismod varius.
Aliquam erat volutpat. Mauris imperdiet condimentum accumsan. Aliquam mollis turpis diam, et congue est imperdiet sed. Morbi sed tellus ut justo eleifend condimentum. Quisque dignissim cursus lectus. In a condimentum justo. Phasellus auctor quam at leo mollis faucibus. Integer rhoncus luctus accumsan.
In hac habitasse platea dictumst. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut luctus luctus tortor, a dignissim ante luctus at. Nunc ac turpis ullamcorper, semper ipsum nec, tincidunt est. Donec nec fringilla dolor. Quisque sed neque semper, convallis massa a, sollicitudin dui. Donec id ipsum justo. Quisque a porttitor eros, eu ullamcorper purus. Maecenas euismod massa mattis dignissim tempus. Mauris non turpis magna. Nulla accumsan suscipit ipsum quis varius. Phasellus nec sapien fermentum, aliquet arcu sed, lobortis nunc.
Integer et nisl ut nisi venenatis rutrum in nec elit. Sed a sem vitae metus ultricies commodo. Praesent ultricies, diam id tempus consequat, justo lacus sodales metus, ac ornare dolor odio ut nisi. Proin in mi ornare, hendrerit nulla sed, porta metus. Curabitur ac quam posuere, tempus nunc a, varius libero. Quisque nec enim pharetra, pulvinar ligula et, vestibulum elit. Integer enim dui, laoreet sit amet aliquam vitae, viverra ut enim. Morbi in dignissim felis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus lobortis nisl sit amet risus venenatis pellentesque. Donec ultricies aliquam purus, vitae venenatis mauris sagittis congue. Sed vehicula iaculis lacinia. Pellentesque maximus elit quis arcu imperdiet ornare. Donec nec nisl id velit laoreet tempus ac id nisl.
Phasellus pulvinar erat ac quam pellentesque pellentesque. Vestibulum nec porta dui. Curabitur nec ligula at nunc blandit tristique vitae ac elit. Phasellus finibus vulputate arcu eget malesuada. Nunc nec massa ullamcorper tellus ullamcorper vulputate. Vestibulum et vestibulum ante. Quisque vulputate sed lacus quis ornare. </p>
</div>
</div>
<div class="row">
<div class="col-md-4 h-50" style="background:green;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque id semper turpis. Donec suscipit nibh eget ante consequat, nec scelerisque massa semper. Nulla eros tortor, viverra semper nisi placerat, pharetra fermentum lac</p>
</div>
</div>
</div>
</body>
</html>
この結果はどのように達成できますか？私は直接的な答えではなく、私を助ける助言を求める。
ありがとうございます。
ああ、それは簡単なことだ簡単に作成でき!!ありがとうございました ！ –
それは私の問題を解決しました！私はちょうど赤いdivと緑色のdivとの間にギャップがありますが、私はあなた自身をあなたに押しつけるでしょう！ EDIT：単なるdivの代わりにrow divを配置して修正しました。 –