stackoom
  简体   繁体   中英

twitter-bootstrap and html

 原文  2016-08-26 07:01:07  3   1    html/ css/ twitter-bootstrap

Question

i am using bootstrap only for slides but it sets the width for even othr things.in this my con div is taking container-fluid width and not taking my specified width.why it is like that. 

 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 &copy; 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>

is that not possible to use both bootstrap a little and html css to make a proper webpage.

1 answers

solution1
 0  2016-08-26 07:12:24

First of all we cannot restrict css file so that it will applied to only a section of html. If you want to do that you have to modify the all the classes inside the file to have a container. Check this CSS styling conflict prevention and namespacing techniques

Better option will be first start developing with bootstrap and override style where ever you need.

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question HTML: Fit Google Maps into the Twitter-Bootstrap div Paypal not integrating into Twitter-Bootstrap Float not working with Twitter-Bootstrap text alignment in twitter-bootstrap Twitter-bootstrap Layout for form Responsive wells in Twitter-Bootstrap? position of twitter button in twitter-bootstrap navbar twitter-bootstrap carousel css image resizing google search bar twitter-bootstrap Why is .change() not working for the twitter-bootstrap select?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM