1
私の問題は簡単です、私のブートストラップの列はdivの真ん中に並んでいません。ブートストラップの列は、区画の中央に並んでいません
は、私のコードを見てください：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width = device-width, initial-scale = 1">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="bootstrap.css">
<link rel="stylesheet" type="text/css" href="style.css">
<style type="text/css"></style>
</head>
<body>
<div id="boxes">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div id="box1">
Hello
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div id="box2">
World
</div>
</div>
</div>
</body>
</html>
#boxes {
margin: 0 auto;
width: 100%;
max-width: 1000px;
height: 600px;
background-color: rgba(79, 27, 184, 0.29);
}
#box1 {
width: 400px;
height: 260px;
border-radius: 10px;
background-color: rgba(37, 100, 165, 0.80);
border: 1px solid rgba(37, 100, 165, 0.80);
margin-top: 50px;
text-align: center;
}
#box2 {
width: 400px;
height: 260px;
border-radius: 10px;
background-color: rgba(37, 100, 165, 0.80);
border: 1px solid rgba(37, 100, 165, 0.80);
margin-top: 50px;
text-align: center;
}
私は箱あたりのdivの50％であるべき、6にcol-lgを入れています。しかし、ボックスは明らかに彼らの列の中心にはありません。これについての助けに感謝します。ありがとう。
ブートストラップ・グリッドにあなたのコードをラップストラップ4で作業している場合は、正しく動作するために '.row'要素内であることを列が必要です。そして、最初にその親にmax-widthを適用するべきではありません。そのために '.container'要素を使います。 – CBroe
ここで水平または垂直の「センタリング」について話していますか？または両方？ – CBroe