twitter-bootstrap和html
[英]twitter-bootstrap and html
問題描述
我只對幻燈片使用引導程序，但是它甚至為其他東西設置寬度。在這個我的condiv中采用容器流體寬度而不是我指定的寬度。為什么會這樣。
body { margin:0px; } #wrapper { width:100%; height:auto; margin:0px; background-color:orange; } #header { width:100%; height:50px; position:fixed; background-color:black; right:0px; z-index: 100; } #header { top:0; } #footer { left:0; right:0; z-index: :100; width:100%; height:48px; background-color:black; color:white; } #footer img { float:right; margin:5px; padding:5px; } .company { width:50%; height:60px; color:white; float:left; text-align:center; padding:15px; } .navbar { height:60px; width:50% background-color:black; color:white; float:left; overflow:hidden; } ul li { display: block; position: relative; padding:10px 15px; float:left; } ul li a { color:white; } .navbar a:hover { border-bottom:3px solid red; padding:18px; } .active { background-color:grey; } #myCarousel { background-color:white; height:370px; width:100%; float:left; } .carousel-inner > .item > img, .carousel-inner > .item > a > img { width: 70%; height:15%; margin: auto; background-color:white; } .thumbnail { height:300px; width:300px; padding:25px auto; margin:5px; } #con { width:100%; height:300px; } .contact { width:60%; height:300px; background-color:grey; padding:100px; float:left; } .enquiry { width:40%; height:300px; background-color:seagreen; float:left; } input[type=text]:focus { border: 3px solid red; } input[type="text"] { margin: 0 0 15px 0; }
<!doctype html> <html> <head> <title>student</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="HandheldFriendly" content="true"> <link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> @media only screen and (max-device-width:320px) { images } @media only screen and (min-width:321px) and (max-device-width:480px) @media only screen and (min-width:768px) and (max-device-width:1024px) @media only screen and (min-device-width:1224px) </head> <body> <div id="wrapper"><!--start wrapper--> <div id="header"><!--start header--> <div class="company"><!--start company--> ABC PVT LIMITED </div><!--end company--> <div class="navbar"><!--start nav--> <ul> <li><a class="active" href="home.html"/>Home</li> <li><a href="about.html"/>About us</li> <li><a href="services.html"/>Services</li> <li><a href="products.html"/>Products</li> <li><a href="contact.html"/>Contact us</li> </ul> </div><!--end nav--> </div><!--end header--> <div id="myCarousel" class="carousel slide" data-ride="carousel"><!--carasel start--> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> <li data-target="#myCarousel" data-slide-to="3"></li> <li data-target="#myCarousel" data-slide-to="4"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"><!--start carosel inner--> <div class="item active"> <img src="../task/photo/h.jpg" alt="Home"> <div class="carousel-caption"> <h3>Home</h3> </div> </div> <div class="item"> <img src="../task/photo/as.jpg" alt="About us"> <div class="carousel-caption"> <h3>About Us</h3> </div> </div> <div class="item"> <img src="../task/photo/s.jpg" alt="Services"> <div class="carousel-caption"> <h3>Services</h3> </div> </div> <div class="item"> <img src="../task/photo/p.jpg" alt="Products"> <div class="carousel-caption"> <h3>Products</h3> </div> </div> <div class="item"> <img src="../task/photo/c.jpg" alt="Contact us"> <div class="carousel-caption"> <h3>Contact Us</h3> </div> </div> </div><!--carosel inner end--> <!-- Left and right controls --> <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div><!--end carosel--> <div class="container-fluid text-center bg-grey"><!--boxes--> <div class="row text-center"> <div class="col-sm-4"> <div class="thumbnail"> <img src="D:\\task\\photo\\i.jpg" alt="Innovation"> <p><strong>Innovation</strong></p> </div> </div> <div class="col-sm-4"> <div class="thumbnail"> <img src="D:\\task\\photo\\cr.png" alt="Creative"> <p><strong>Creativity</strong></p> </div> </div> <div class="col-sm-4"> <div class="thumbnail"> <img src="D:\\task\\photo\\po.jpg" alt="Positive"> <p><strong>Positivity</strong></p> </div> </div> </div><!--end boxes--> <div id="con"><!--start con--> <div class="contact"><!-- start contact--> <h1>Address</h1> <p><span class="glyphicon glyphicon-map-marker"></span> Abc private limited no54,2ndstreet, madipakkam, chennai-67. </p> <p><span class="glyphicon glyphicon-envelope"></span> ABCPVT@gmail.com</p> </div><!--end contact--> <div class="enquiry"><!--start enquiry--> <h1>Enquiry Form</h1> <table border="0" align="center"> <form name="form" action="email.php" id="form" method="post"> <tr> <tr> <td>Name</td> <td><input name="name" placeholder="Name" type="text" value=""></td> </tr> <<tr> <td>Email</td> <td><input name="email" placeholder="Email" type="text" value=""></td> </tr> <tr> <td>Phone</td> <td><input name="phone" placeholder="phonenumber" type="text" value=""></td> </tr> <tr> <td>Message</td> <td><textarea name="msg" placeholder="Type your text here..."></textarea></td> </tr> <td colspan="2" style="text-align:center"><input id="send" name="submit" type="submit" value="Submit"></td> </tr> </form> </table> </div><!--end enquiry--> </div><!--end con--> </div><!--end wrapper--> <div id="footer"><!--start footer--> copyrights © to WWW.abcpvt.com <img src="../task/photo/fb.png" alt="fb"/> <img src="../task/photo/ln.png" alt="tweet"/> <img src="../task/photo/tw.png" alt="linkedin"/> </div><!--end footer--> </body> </html>
是不可能同時使用一些引導程序和html CSS來制作適當的網頁。
1 個解決方案
解決方案1
0 2016-08-26 07:12:24
首先，我們不能限制css文件，以便僅將其應用於html的一部分。 如果要這樣做，則必須修改文件中的所有類以擁有一個容器。 檢查此CSS樣式沖突預防和命名間隔技術
更好的選擇是首先在需要時使用引導程序和覆蓋樣式進行開發。
為什么.change（）對於twitter-bootstrap select不起作用？
[英]Why is .change() not working for the twitter-bootstrap select?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.
相關問題
HTML：將谷歌地圖放入 Twitter-Bootstrap div
貝寶未集成到Twitter-Bootstrap
Float無法與Twitter-Bootstrap一起使用
twitter-bootstrap中的文本對齊
表單的Twitter-bootstrap布局
Twitter-Bootstrap中的響應井？
twitter按鈕在twitter-bootstrap導航欄中的位置
twitter-bootstrap輪播css圖像調整大小
谷歌搜索欄twitter-bootstrap
為什么.change（）對於twitter-bootstrap select不起作用？
相關標簽