我是個新手，我已經在容器和行上進行了嘗試，并根據需要對列進行了相應的劃分。目前的大綱在我的電腦上得到了一個很好的網頁，但我仍然沒有得到一個回應式的頁面。我知道給媒體標簽可以解決這個問題，但我正在嘗試bootstrap v4.6.
。<! DOCTYPE html>
<!--建立一個github頁面->
<html lang="en">/span>
<head>/span>
<meta charset="UTF-8">/span>
< meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=devicewidth, initial-scale=1. 0">
<title>Document</title>
< link rel="styleheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1 K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2 l"/span> crossorigin="anonymous"/span>>
<link rel=" stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min. css" integrity="sha512- SfTiTlX6kk qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB /Sw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<STYLE>
body{
background-color:#a9ba9d;
}
.box{
background-color: #36454f;
margin-bottom: 90px;
}
.fa{
color: white;
padding:15px;
}
.text-center{
padding-left:650px;
color: white;
}
.box2{
background-color:#343434;
margin-top:50px。
margin-left:200px。
padding: 100px 400px 10px 200px;
border-radius:25px;
height: 190px;
}
.boxpart{
background-color:#343434;
padding-bottom:500px。
border-radius:25px;
margin-right: 50px;
width:300px.
}
.small-box{
background-color:#343434;
margin:20px。
margin-top: 80px;
padding:70px 0px 50px 0px;
border-radius: 25px;
}
.small-box1{
background-color:#343434;
margin:20px。
margin-left:125px。
margin-top:80px;
padding:40px 0px 50px 0px;
border-radius: 25px;
}
input{
background-color:#343434;
margin-left:250px。
padding: 2px 2px 2px 5px;
border-radius：10px。
width: 500px。
}
input:placeholder{
color: gray
}
.row{
width:900px;
}
</STYLE>>
</head>
<body>
<div class="box">
<span class="fa-github fa-2x"/span> > </span>>
<span class="text-enter"> GITHUB</span>
</div>/span>
<div class="container">
<div class=" row">
<div class="col-sm-3 col-md-3 col-lg-3"/span>>
<div class="text-centre boxpart"/span>>
</div>/span>
</div>/span>
<div class="col-sm-9 col-md-9 col-lg-9"/span>>
< input type="text" placeholder="Search">/span>
<div class=" row">
<div class="col-sm-3 col-md-3 col-lg-3 small-box1"/span>> </div>>
<div class="col-sm-3 col-md-3 col-lg-3 small-box"/span>> </div>>
<div class="col-sm-3 col-md-3 col-lg-3 small-box"/span>> </div>>
<div class="col-sm-6 col-md-6 col-lg-6 box2"/span>> </div>>
</div>/span>
</div>/span>
</div>/span>
</div>/span>
</div>/span>
</div>/span>
</body>
</html>
uj5u.com熱心網友回復：
當你使用bootstrap中的內置行時，盡量不要使用名為行的類，以避免出現問題，同時bootstrap中的網格系統在12列中作業，例如，如果一個div是col-lg-8，你有兩個div，另一個應該是col-lg-4，所以它可以是12列。
我還建議你閱讀他們官方網站上的這份檔案
https://getbootstrap.com/docs/4.1/layout/grid/uj5u.com熱心網友回復：
首先你有一些多余的div標簽。
然后你必須研究這里的bootstrap斷點：[https://getbootstrap.com/docs/4.6/layout/overview/#responsive-breakpoints][1]
如果你想讓內容在移動端分欄，你需要在你的所有div中添加'col-12'。
示例：
<div class="row">
<div class="col-sm-3 col-md-3 col-lg-3"/span>>
<div class="text-centre boxpart"/span>> </div>>
</div>/span>
<div class="col-sm-9 col-md-9 col-lg-9"/span>>
< input type="text" placeholder="Search">/span>
<div class=" row">
<div class="col-12 col-sm-3 col-md-3 col-lg-3 small-box1"/span>> </div>>
<div class="col-12 col-sm-3 col-md-3 col-lg-3 small-box" > </div>>
<div class="col-12 col-sm-3 col-md-3 col-lg-3 small-box" > </div>>
<div class="col-12 col-sm-6 col-md-6 col-lg-6 box2"/span>> </div>>
</div>/span>
</div>/span>
</div>/span>
我希望它是有幫助的
uj5u.com熱心網友回復：
你已經為幾個元素指定了寬度。當你對事物設定了一個固定的寬度，它們就不能被回應。.boxpart div將永遠是500px寬，所以它在小于500px寬的設備上會溢位。你還覆寫了來自Bootstrap的.row類的寬度，將其設定為固定寬度。所以，這也不可能是回應式的。在我看來，你在右邊的部分也有一些額外的S。
底線：不要與框架對抗。使用它給你的東西。
這是對你所擁有的東西進行的五分鐘清理。還有一些作業要做（比如把你的頭放在一個），所以看一下bootstrap的檔案并深入研究。
<html lang="en">
<head>/span>
<meta charset="UTF-8">/span>
< meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=devicewidth, initial-scale=1. 0">
<title>Document</title>
< link rel="styleheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1 K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2 l"/span> crossorigin="anonymous"/span>>
<link rel=" stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min. css" integrity="sha512- SfTiTlX6kk qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB /Sw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<STYLE>
body{
background-color:#a9ba9d;
}
.box{
background-color: #36454f;
}
.boxpart{
background-color: #343434;
border-radius:25px;
}
.small-box{
background-color:#343434;
border-radius:25px。
}
input{
background-color:#343434;
border-radius:10px;
}
input::placeholder{
color: gray
}
</STYLE>>
</head>
<body>
<div class="box mb-5 text-white">
<i class="fa fithub fa-2x p-2" > </i>>
<span>GITHUB</span>
</div>/span>
<div class="container">
<nav>/span>
</nav>/span>
<div class="row">
<div class="col-md-3"/span>>
<div class="text-center boxpart p-5 text-white">
<p>left box</p>/span>
<p>left box</p>
<p>left box</p>
<p>left box</p>
</div>/span>
</div>/span>
<div class="col-md-9 mt-3 mt-md-0"/span>>
<div class="row">
<div class="col-12">/span>
< input type="text" class="p-1 w-100" placeholder="Search"/>
</div>
</div>/span>
<div class="row mt-2 mx-0">
<div class="col small-box py-5 text-white text-center"/span>> test</div>
<div class="col small-box py-5 text-white text-center"/span>> test</div>
<div class="col small-box py-5 text-white text-center"/span>> test</div>
</div>/span>
</div>/span>
</div>/span>
</div>/span>
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/321643.html
標籤：
上一篇：陣列和原始型別的扁平/合并陣列