bootstrap自定义布局

Question

我正在使用＆＃34; Bootstrap 3.3.2＆＃34;制作如下图像的东西 -

在下面的图片链接上，背景（灰色和红色边框）是一个jpeg图像，它干扰响应，所以我试图通过引导使用行列，但我没有使它响应和根据图像链路

http://www.screencast.com/t/sRimTge0jHo

请帮助我，根据图片左边会有购物车栏目＆amp;搜索部分在右侧，搜索部分下方将有一个品牌滚动条。我在下面提供你的代码，我实际上在做什么。

Here is the code - 

<div class="row">
                    <div class="col-md-2">
                        <div class="cart-bg">
                            <div class="cart-icon">
                            <i class="fa fa-shopping-cart pull-left"></i>
                            <h3 class="pull-left">Item : 0<br/>
                            <a href="#">View Cart</a><br/>
                            <a href="#">Checkout</a></h3>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-10">
                        <div class="col-md-12">
                            <div class="search-bg">
                                <form class="form-set">
                                <label><h4>Search by</h4></label>
                    <select>
                    <option value="Brand">--Brand--</option>
                    <option value="Brand1"></option>
                    <option value="Brand2"></option>
                    <option value="Brand3"></option>
                    </select>
                    <select>
                    <option value="Brand">--Technology--</option>
                    <option value="Brand1"></option>
                    <option value="Brand2"></option>
                    <option value="Brand3"></option>
                    </select>
                    <label><h4>Keyword Search</h4></label><input type="text" />
                    <i class="fa fa-search"></i>
                                </form>
                            </div>
                        </div>
                        <div class="clearfix"></div>
                        <div class="col-md-12">
                            <div class="makeMeScrollable">
                <marquee behavior="scroll" direction="left" onmouseover="this.stop();" onmouseout="this.start();" scrollamount="10">
                <img class="img-responsive" src="images/logo_header.png" />
                <img class="img-responsive" src="images/logo_header.png" />
                <img class="img-responsive" src="images/logo_header.png" />
                <img class="img-responsive" src="images/logo_header.png" />
                <img class="img-responsive" src="images/logo_header.png" />
                <img class="img-responsive" src="images/logo_header.png" />
                <img class="img-responsive" src="images/logo_header.png" />
                </marquee>                
            </div>
                        </div>
                    </div>
                </div>

下面是js小提琴 -

＆＃13;

＆＃13;

@charset "utf-8";
/* CSS Document */



body{ font-family: 'Noto Sans', sans-serif; background:fff;
font-family: 'Oswald', sans-serif;}

.body-bg{ background:#fafafa repeat-y;
	box-shadow: 0 0 13px black;}
	
.clear{ clear:both;}

.top-header{background:url(../images/header_bg.png);
	background-repeat:no-repeat;
    background-position: top center;
    background-size:cover;
	}

.logo{
	float: left;
	margin: 7%;
	min-height: 100%;
}

.top-header-info{
	float:right;
	background:#c60c0c;
	margin: 5%;
	padding:1em;
}

.set-icon{display:inline;
	font-family: 'Noto Sans', sans-serif; 
	font-weight:700; font-size: 20px; 
	color:#FFF; padding: 1em;}
	
.set-icon h1{ display:inline;
	font-family: 'Noto Sans', sans-serif; 
	font-weight:700; font-size: 20px; 
	color:#FFF; padding: 1em;}
	
.navbar-nav{
        float:none;
        margin: 0 auto;
        display: table;
        table-layout: fixed;
    }
	
.navbar-inner {
  	background: #8b171a;
	background: -webkit-gradient(linear, 15% 100%, 100% 6%, color-stop(0%, #c52026), color-stop(100%, #8b171a));
	background: -webkit-linear-gradient(top, #c52026,#8b171a);
	background: -moz-linear-gradient(top, #c52026,#8b171a);
	background: -o-linear-gradient(top, #c52026,#8b171a);
	background: -ms-linear-gradient(top, #c52026,#8b171a);
	background: linear-gradient(top, #c52026,#8b171a);
	border-radius:0;
}	
.navbar-inner .nav {
	float:none;
}	

.navbar {
position: relative;
min-height: 50px;
margin-bottom: 0 !important;
border: 1px solid transparent;
}

.navbar-inner .nav li a {
	color: #fff;
	padding-top: 20px;
	padding-bottom: 20px;
	text-shadow: none;
	background: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	-webkit-transition: background 0.1s linear,opacity 0.1s linear;
	-moz-transition: background 0.1s linear,opacity 0.1s linear;
	-ms-transition: background 0.1s linear,opacity 0.1s linear;
	-o-transition: background 0.1s linear,opacity 0.1s linear;
	transition: background 0.1s linear,opacity 0.1s linear;
	-webkit-font-smoothing: antialiased;			
	opacity: .9;
	font-family: 'Noto Sans', sans-serif;
	font-size: 16px; 
	font-weight: 700;
}
.navbar-inner .nav li a:hover {
	background: #f67d0f;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	color: #fff;
	opacity: 1;
}

.ib{ background-color:#FFF;}

.cart-bg{ display:inline-block;
		padding: 19px;
		margin-bottom: 20px;
		background-color:#3c3c3c;
		width:auto;
		height:100%;
		border-top:#8b171a 4px solid;
		border-right:#8b171a 4px solid;
		border-bottom:#8b171a 4px solid;
		border-left:#8b171a 4px solid;
		}
		
.cart-icon{font-family: 'Noto Sans', sans-serif; font-weight:700; font-size: 80px;; color:#FFF;}

.cart-icon h3{ font-family: 'Oswald', sans-serif; font-weight:300; }

.cart-icon a{ font-family: 'Oswald', sans-serif; font-weight:300; color:#FFF; }

.cart-icon a:hover{font-family: 'Oswald', sans-serif; font-weight:400; color:#FFF; text-decoration:none;}



.search-bg{display:inline-block;
		padding: 19px;
		margin-bottom: 20px;
		background-color:#3c3c3c; 
		border-top:#8b171a 4px solid;
		border-bottom:#8b171a 4px solid;
		border-right:#8b171a 4px solid;
		width:100%
		height:auto;
		}

.form-group { margin-bottom: 0 !important;
}

.form-set{ padding:1%;}

.form-set label{font-family: 'Noto Sans', sans-serif;
	font-size: 16px; 
	font-weight: 600; color:#FFF;}
	
.form-set i{ font-size:18px; color:#FFF; }

.makeMeScrollable{ display:inline-block;}

.makeMeScrollable img{ display:inline; padding-top:10px;}

＆＃13;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
<title>NJ Security</title>
<link href='http://fonts.googleapis.com/css?family=Noto+Sans:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="container"><!--CONTAINER START-->
	<div class="body-bg"><!--BODY BG START-->
    	<!----top-header---->
        <div class="top-header">
        	<div class="row">
            	<div class="col-md-6 col-xs-6">                
                	<img class="img-responsive logo" src="images/logo_header.png" alt="NJ LOGO">            	
   				</div>
                <div class="col-md-6 col-xs-6">
                	<div class="top-header-info">
               			<div class="set-icon">
                    		</i><i class="fa fa-skype"></i><h1>800.973.6140 FREE</h1>
                     	</div><br/>
                        <div class="set-icon">
                            <i class="fa fa-calendar"></i><h1>MONDAY - FRIDAY</h1>
                        </div><br/>
                        <div class="set-icon">
                            <i class="fa fa-clock-o"></i><h1>9:30 To 05:00 AM</h1>
                		</div><br/>
              		</div>
                </div>            
            </div>
    	</div>
        	<div class="row">
            	<div class="col-md-12 col-xs-12">
                	<nav class="navbar navbar-inner" role="navigation">
                		<div class="navbar-header">
                    	<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-collapse">
						<span class="sr-only">Toggle Menu</span>
                        <span class="icon-bar ib"></span>
                        <span class="icon-bar ib"></span>
                        <span class="icon-bar ib"></span>
                        </button>                        
                    	</div>
                        <div class="collapse navbar-collapse" id="nav-collapse">
                            <ul class="nav navbar-nav nav-bg">
							<li><a href="#">Home</a></li>
                        	<li><a href="#">About</a></li>
                        	<li><a href="#">Safes</a></li>
                        	<li><a href="#">Access Control</a></li>
                        	<li><a href="#">Video Surveillance</a></li>
                        	<li><a href="#">Locks</a></li>
                        	<li><a href="#">Automation</a></li>
                        	<li><a href="#">Contact Us</a></li>                            
                            </ul>
                        </div>                    
                	</nav>	
                </div>
            </div>
                    <div class="row">
                    	<div class="col-md-2">
                        	<div class="cart-bg">
                            	<div class="cart-icon">
                	<i class="fa fa-shopping-cart pull-left"></i>
                	<h3 class="pull-left">Item : 0<br/>
                    <a href="#">View Cart</a><br/>
                    <a href="#">Checkout</a></h3>
                	</div>
                            </div>
                        </div>
                        <div class="col-md-10">
                        	<div class="col-md-12">
                            	<div class="search-bg">
                                	<form class="form-set">
                                        <label><h4>Search by</h4></label>
                                        <select>
                                        <option value="Brand">--Brand--</option>
                                        <option value="Brand1"></option>
                                        <option value="Brand2"></option>
                                        <option value="Brand3"></option>
                                        </select>
                                        <select>
                                        <option value="Brand">--Technology--</option>
                                        <option value="Brand1"></option>
                                        <option value="Brand2"></option>
                                        <option value="Brand3"></option>
                                        </select>
                                        <label><h4>Keyword Search</h4></label><input type="text" />
                                        <i class="fa fa-search"></i>
                                    </form>
                                </div>
                        	</div>
                            <div class="clearfix"></div>
                            <div class="col-md-12">
                            	<div class="makeMeScrollable">
                    <marquee behavior="scroll" direction="left" onmouseover="this.stop();" onmouseout="this.start();" scrollamount="10">
                    <img class="img-responsive" src="images/logo_header.png" />
                    <img class="img-responsive" src="images/logo_header.png" />
                    <img class="img-responsive" src="images/logo_header.png" />
                    <img class="img-responsive" src="images/logo_header.png" />
                    <img class="img-responsive" src="images/logo_header.png" />
                    <img class="img-responsive" src="images/logo_header.png" />
                    <img class="img-responsive" src="images/logo_header.png" />
                    </marquee>                
                </div>
                        	</div>
                        </div>
                  	</div>      
               
            
          		
            
            
            
    
    
    
    
    
	</div><!--BODY BG END-->
</div><!--CONTAINER END-->
<script src="js/bootstrap.min.js"></script>
</body>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</html>

＆＃13;

＆＃13;

＆＃13;

Answer 1

拉左类就是原因。

添加媒体查询以控制较小屏幕上的css

@media (max-width:680px){
    .sec-c { height:auto;}
    .cart-icon h3 { float:none !important;}
    .makeMeScrollable { display:block;}
}

<强> FIDDLE DEMO

=============================================== ============================

新的更新，Sameer，它都是关于CSS调整的。 我添加了几个类并相应地设置它们。 请看下面的新小提琴

<强> Fillde DEMO 2

我强烈建议您优化HTML结构和使用的默认CSS。