-1
반응 형 기능을 사용하여 최신 트위터 부트 스트랩으로 사이트를 구축하고 있습니다.부트 스트랩 반응 형리스트 포지셔닝
내 문제는 두 개의 목록이 나란히 표시되지만 뷰포트 너비가 768px보다 작 으면 둘 모두에 맞게 충분한 공간이 있음에도 불구하고 쌓인 것처럼 보입니다. 이 문제를 어떻게 해결할 수 있습니까?
또한 몇 가지 사소한 일이 있습니다. 바닥 글에 저작권 기호 앞에 나타나는 이상한 A 기호가 있습니다 ... 어떻게 처리합니까? 또한 IE에서 두 요소는 다른 모든 브라우저에서와 마찬가지로 인라인으로 표시되지 않습니다.
HTML은 :
<!DOCTYPE html>
<html lang="en">
<head>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="css/bootstrap-responsive.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AGHicks Homepage</title>
<link href="css/stylesheet.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container-fluid">
<!-- Header -->
<div class="row-fluid">
<div class="span5 logo">
<a href="index.html"><img src="images/Logo.png" class="logo"></a>
</div>
<div class="span4 offset3 phone_numbers">
<img src="images/Phone_icon.png" class="pull-left phone_icon hidden-phone hidden-tablet">
<h4 class="pull-right align_right">Northampton <span>01604786464</span><br><br>Mobile <span>07710537685</span></h4>
</div>
</div>
<!-- Navbar -->
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="navbar_link navitem1"><a href="index.html"><strong>HOME</strong></a></li>
<li class="divider-vertical navitem2"></li>
<li class="navbar_link navitem3"><a href="http://www.google.com"><strong>GALLERY</strong></a></li>
<li class="divider-vertical navitem4"></li>
<li class="navbar_link navitem5"><a href="http://www.google.com"><strong>ABOUT US</strong></a></li>
<li class="divider-vertical navitem6"></li>
<li class="navbar_link navitem7"><a href="http://www.google.com"><strong>CONTACT</strong></a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- Content -->
<div class="row-fluid content">
<div class="span6">
<div id="homepage_carousel" class="carousel slide">
<div class="carousel-inner">
<div class="active item"><img src="images/Homepage/640x480px-City-&-Guilds.png" /></div>
<div class="item"><img src="images/Homepage/640x480px-Domestic-&-Commercial.png" /></div>
<div class="item"><img src="images/Homepage/640x480px-Small-One-Off-Jobs.png" /></div>
</div>
</div>
</div>
<div class="span6">
<div class="row-fluid homepage_text">
<div class="span12">
<h5 class="text_justify">Welcome to AGHicks Building Services website! We are a Northampton based, family run company with over 20 years experience. Hardwork, efficiency and reliability are instilled throughout the workforce and we have gained a strong reputation through word of mouth.</h5>
</div>
</div>
<div class"row-fluid">
<div class="span12 icon_container">
<img src="images/Homepage/Map_pin.png" class="grid_item grid_item1" >
<h5 class="redtext grid_item grid_text">Northampton Based</h5>
<img src="images/Homepage/Quote.png" class="grid_item grid_item2" >
<h5 class="redtext grid_item grid_text">Free Quotes</h5>
</div>
<div class="span12 icon_container2">
<img src="images/Homepage/Tools.png" class="grid_item grid_item3" >
<h5 class="redtext grid_item grid_text">No Job Too Small</h5>
<img src="images/Homepage/Piggybank.png" class="grid_item grid_item4" >
<h5 class="redtext grid_item grid_text">Competitive Prices</h5>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<h5 class="redtext centered">OUR SERVICES INCLUDE</h5>
</div>
</div>
<div class="row-fluid">
<div class="span5">
<ul>
<li><strong>Conservatories</strong></li>
<li><strong>Extensions</strong></li>
<li><strong>Window & Door Refits</strong></li>
<li><strong>Bricklaying</strong></li>
<li><strong>Driveways</strong></li>
<li><strong>Carpentry</strong></li>
<li><strong>Patios</strong></li>
<li><strong>Stonework</strong></li>
</ul>
</div>
<div class="span6 offset1 lists">
<ul>
<li><strong>Plastering</strong></li>
<li><strong>Kitchen & Bathroom Refits</strong></li>
<li><strong>Tiling</strong></li>
<li><strong>Fencing</strong></li>
<li><strong>Fascias</strong></li>
<li><strong>Garages & Carports</strong></li>
<li><strong>Guttering</strong></li>
</ul>
</div>
</div>
</div>
<!-- Footer -->
<div class="row-fluid footer_wrapper">
<div class="span12">
<div class="row-fluid footer">
<div class="span5">
<p class="footer_text"><strong>Copyright © AGHicks Building Services 2012 - All rights reserved.<br>Registered Address - 19 Bentley Close, Rectory Farm, Northampton, NN3 5JS.</strong></p>
</div>
<div class="span4 offset3 align_right">
<p class="footer_text"><strong>Web Design Services and SEO from <a href="http://www.benmil.tumblr.com/me">Ben Mildren</a></strong></p>
</div>
</div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
$('.carousel').carousel({
interval: 3500
})
</script>
</body>
CSS의는 여기에 있습니다 : 사전에 http://gw.gd/Ooky
감사합니다.
전체 사이트를 게시하는 대신 관련 코드 만 포함하고 jsfiddle.net – bookcasey
에 게시하는 간단한 예제를 작성하십시오. "뷰포트 너비가 768px 너비 미만인 경우 스택에 표시됩니다."이것은 표준 동작입니다. 이 페이지에서 http://twitter.github.com/bootstrap/scaffolding.html "767px 뷰포트 아래에서 열이 유동적으로되어 세로로 쌓입니다." – Omega
최신 버전의 Boostrap을 사용하고 있지 않다는 점에 유의하십시오. 작은 장치를 지원하는 새로운 그리드 시스템을 제공하는 새로 출시 된 Bootstrap 3으로 업그레이드 할 수 있습니다. http://getbootstrap.com/을 확인하십시오. –