如何使行元素占據整個寬度？
[英]How do I make the row element take up the entire width?
問題描述
對於引導程序，我還很陌生，我正在嘗試為測試網站找出一些代碼。 我遇到了引導程序問題，我設置了一個元素並將2個元素放入其中。 左邊是一個段落（我打算稍后再更改為更大的元素），而右邊是圖像（我認為尺寸無關緊要）。 我注意到該row元素沒有占據屏幕的整個寬度，並認為這是由於它位於其中。 我進入CSS文件進行故障排除，將行類的寬度設置為100％，然后回到我的站點並打開了Chrome的開發工具。 我注意到容器div的左右兩側都有邊距，這導致行div占用的空間較小，並使其自身在容器的元素內居中。 我將margin的左右值都設置為0px，然后返回到站點。 左邊距消失了，盡管Chrome瀏覽器的檢查顯示也沒有右邊距，但是當我將鼠標懸停在容器元素上時它仍然出現。 我不認為這是特異性錯誤，因為左邊距消失了，但是右邊距消失了。 我真的很沮喪。 正如我所提到的，我對Bootstrap還是相當陌生，所以這個問題很明顯。 我檢查以確保我正確輸入了所有語法以確保右邊距正確，並且對我來說看起來很正常。 但是，我向您顯示的代碼沒有對容器和行進行的修改。 我顯示的代碼是正常的（除了容器居中之外）。
如果有一些奇怪的間距問題，我深表歉意。 我為每行代碼手動間隔4次，因此如果不應該有4個空格，我深表歉意。
.header .jumbotron { color: #fff; background-color: #a1ff7c; font-family: Roboto Condensed; margin-bottom: 0px; } .navbar-default { background-color: #78c45a; border: 0px; font-family: Roboto Condensed; } .gallery .container { font-family: Roboto Condensed; } .navbar-default .navbar-nav > .active > a, .navbar-default .navbar- nav > .active > a:focus { color: white; /*BACKGROUND color for active*/ background-color: #78c45a; } .navbar-default .navbar-nav > .active > a:hover { background-color: #5a9344; color: #fff; } .navbar-default .navbar-nav > li > a { color: #fff; } .navbar-default .navbar-nav > li > a:hover { color: #fff; background-color: #5a9344; } .navbar-default .navbar-brand { color: #fff; } .navbar-default .navbar-brand:hover { background-color: #5a9344; color: #fff; } .navbar-default .navbar-toggle .icon-bar { background-color: #fff; } .navbar-default .navbar-toggle { border: 0px; } .navbar-default .navbar-toggle:hover { background-color: #5a9344; ; } p { font-family: Roboto Condensed; }
<html lang="en"> <head> <title>Hope's Seed</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" h ref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"> </script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script> <link href="CSS/style.css" rel="stylesheet" type="text/css"> <link href="https://fonts.googleapis.com/css? family=Roboto+Condensed" rel="stylesheet"> </head> <body> <div class="header"> <div class="jumbotron text-center"> <h1>Hope's Seed</h1> <p>You're Not Alone</p> </div> </div> <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="hopesseed.html">Hope's Seed</a> </div> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav"> <li><a href="#">About</a> </li> <li><a href="#">Sponsors</a> </li> <li><a href="#">Donate</a> </li> <li><a href="#">Services</a> </li> <li><a href="#">More</a> </li> </ul> </div> </div> </nav> <div class="Intro"> <div class="container"> <div class="row"> <div class="col-sm-6"> <p>Enriching the lives of children who are medically fragile and terminally ill.</p> </div> <div class="col-sm-3"> <img src="Images/image1.png" class="img-responsive"> </div> </div> </div> </div> <div class="gallery"> <div class="container"> <div class="row"> <div class="col-sm-4"> <h3>Family Support</h3> <p>Hope's Seed is here to support you.</p> </div> <div class="col-sm-4"> <h3>Volunteer Opportunities</h3> <p>Hope's Seed has many ways to volunteer.</p> </div> <div class="col-sm-4"> <h3>Giving Opportunities</h3> <p>Enriching the lives of Texas children who are medically fragile and terminally ill.</p> </div> </div> </div> </div> </body> </html>
2 個解決方案
解決方案1
1 2017-02-13 05:15:47
嘗試使用“容器流體”
<title>Hope's Seed</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"> </script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script>
<body>
<div class = "header">
<div class="jumbotron text-center">
<h1>Hope's Seed</h1>
<p>You're Not Alone</p>
</div>
</div>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="hopesseed.html">Hope's Seed</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a href="#">About</a></li>
<li><a href="#">Sponsors</a></li>
<li><a href="#">Donate</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">More</a></li>
</ul>
</div>
</div>
</nav>
<div class="Intro">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
<p>Enriching the lives of children who are medically fragile and terminally ill.</p>
</div>
<div class="col-sm-3">
<img src="Images/image1.png" class="img-responsive">
</div>
</div>
</div>
</div>
<div class = "gallery">
<div class="container-fluid">
<div class="row">
<div class="col-sm-4">
<h3>Family Support</h3>
<p>Hope's Seed is here to support you.</p>
</div>
<div class="col-sm-4">
<h3>Volunteer Opportunities</h3>
<p>Hope's Seed has many ways to volunteer.</p>
</div>
<div class="col-sm-4">
<h3>Giving Opportunities</h3>
<p>Enriching the lives of Texas children who are medically fragile and terminally ill.</p>
</div>
</div>
</div>
</div>
</body>
</html>
現場演示-https: //jsfiddle.net/f39wurmn/1/
解決方案2
0 2017-02-13 04:29:11
希望這可以幫助
在CSS中為body設置margin:0 。 某些瀏覽器具有默認邊距
body
{
margin:0;
}
如何使元素在其父元素的寬度內占據窗口的寬度？
[英]How can I make an element take up the width of the window inside of the width of its parent?
如何使偽元素適合 div 的整個寬度？ 它在滾動處被切斷
[英]How do I make a pseudo element fit the entire width of div? It is cutting off at the scroll
如何使用bootstrap使圖像響應而不占用整個分區的寬度？
[英]How to make an image responsive using bootstrap without having it take up the entire width of the division?
如何創建占用100％寬度的內聯塊元素。 第二個元素還有一個懸停顯示的元素
[英]How do I create inline block elements that take up 100% width. The second element has another element that shows on hover
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.