html - Bootstrap 自定义布局-6ren

html - Bootstrap 自定义布局

转载作者：行者123 更新时间：2023-11-28 08:15:43

我正在使用“Bootstrap 3.3.2”制作类似下图的东西 -

在下面的图片链接中，背景(灰色和红色边框)是一个干扰响应的 jpeg 图像，所以我试图通过 Bootstrap 使用行列来实现它，但我未能根据图像链接使其响应

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

请帮助我，根据图片，左侧有购物车部分，右侧有搜索部分，搜索部分下方有品牌滚动条。我在下面为您提供代码，我实际上在做什么。

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 fiddle -

@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;}

<!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>

最佳答案

左拉类(Class)是原因。

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

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

FIDDLE DEMO

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

新的更新，Sameer，一切都与 CSS 调整有关。我添加了几个类并相应地设置了样式。请查看下面的新 Fiddle

Fillde DEMO 2

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

关于html - Bootstrap 自定义布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29001083/

文章推荐： javascript - 如何从异步调用返回响应？

文章推荐： c++ - 如何更改 QTableWidget 的最小尺寸？

文章推荐： javascript - 在我刷新浏览器之前，菜单看起来已损坏

文章推荐： javascript - 使用 IDE 中的文档使用 JavaScript 进行编程

css - 自定义 ID 元素 + 自定义 CSS
好的，所以我编辑了以下... 只需将以下内容放入我的 custom.css #rt-utility .rt-block {CODE HERE} 但是当我尝试改变... 与 #rt-sideslid
ios - 自定义 tableview 单元格的问题。自定义 tableview 单元格内的 Collectionview 未根据单元格的高度进行调整
在表格 View 中，我有一个自定义单元格(在界面生成器中高度为 500)。在该单元格中，我有一个 Collection View ，我按 (10,10,10,10) 固定到边缘。但是在 tablev
swift - 如何使用鼠标在另一个 IB 自定义 View 中进入/退出来控制一个 IB 自定义 View
对于我的无能，我很抱歉，但总的来说，我对 Cocoa、Swift 和面向对象编程还很陌生。我的主要来源是《Cocoa Programming for OS X》(第 5 版)，以及 Apple 的充满
python - 自定义 Python Wheel 文件的 Yocto Warrior 自定义 Bitbake 配方无法安装，因为找不到 pip3
我正在使用 meta-tegra 为我的 NVIDIA Jetson Nano 构建自定义图像。我需要 PyTorch，但没有它的配方。我在设备上构建了 PyTorch，并将其打包到设备上的轮子中。现
jquery序列化()+自定义？
在 jquery 中使用 $.POST 和 $.GET 时，有没有办法将自定义变量添加到 URL 并发送它们？我尝试了以下方法: $.ajax({type:"POST", url:"file.php?
自定义 Traefik（本地）插件
Traefik 已经默认实现了很多中间件，可以满足大部分我们日常的需求，但是在实际工作中，用户仍然还是有自定义中间件的需求，为解决这个问题，官方推出了一个 Traefik Pilot[1] 的功
android - 自定义 TextInputLayout
我想让我的 CustomTextInputLayout 将 Widget.MaterialComponents.TextInputLayout.OutlinedBox 作为默认样式，无需在 XML 中
Emacs rgrep 自定义
我在 ~/.emacs 中有以下自定义函数: (defun xi-rgrep (term) (grep-compute-defaults) (interactive "sSearch Te
excel - 自定义 SUMPRODUCT()
我有下表: 考虑到每个月的权重，我的目标是在 5 个月内分散 10,000 个单位。与 10,000 相邻的行是我最好的尝试(我在这上面花了几个小时)。黄色是我所追求的。我试图用来计算的逻辑如下:计
自定义 Joomla 组件的文件上传表单
我的表单中有一个字段，它是文件类型。当用户点击保存图标时，我想自然地将文件上传到服务器并将文件名保存在数据库中。我尝试通过回显文件名来测试它，但它似乎不起作用。另外，如何将文件名添加到数据库中？是在模
Python邮箱 "from name"自定义
我有一个 python 脚本来发送电子邮件，它工作得很好，但问题是当我检查我的电子邮件收件箱时。我希望该用户名是自定义用户名，而不是整个电子邮件地址。最佳答案发件人地址应该使用的格式是: You
r - 自定义 ggcorrplot
我想减小 ggcorrplot 中标记的大小，并减少文本和绘图之间的空间。 library(ggcorrplot) data(mtcars) corr <- round(cor(mtcars), 1)
gtk - 自定义 GtkFileChooser
GTK+ noob 问题在这里: 是否可以自定义 GtkFileChooserButton 或 GtkFileChooserDialog 以删除“位置”部分(左侧)和顶部的“位置”输入框？我实际上要
Magento 自定义 block
我正在尝试在主页上使用 ajax 在 magento 中使用 ajax 显示流行的产品列表，我可以为 5 或“N”个产品执行此操作，但我想要的是将分页工具栏与结果集一起添加. 这是我添加的以显示流行产
Django 自定义 PasswordResetForm
我正在尝试使用 PasswordResetForm 内置函数。由于我想要自定义表单字段，因此我编写了自己的表单: class FpasswordForm(PasswordResetForm):
Angular:拖放树 - 自定义
据我了解，新的 Angular 7 提供了拖放功能。我搜索了有关 DnD 的 Tree 组件，但没有找到与树相关的内容。我在 Stackblitz 上找到的一个工作示例.对比drag'ndrop功能
WPF 自定义 TabControl
我必须开发一个自定义选项卡控件并决定使用 WPF/XAML 创建它，因为我无论如何都打算学习它。完成后应该是这样的: 到目前为止，我取得了很好的进展，但还有两个问题: 只有第一个/最后一个标签项应该有
r - 自定义 xtable
我要定制xtable用于导出到 LaTeX。我知道有些问题是关于 xtable在这里，但我找不到我要找的具体东西。以下是我的表的外观示例: my.table <- data.frame(Specif
ejs - EJS中的日期时间格式/自定义
用ejs在这里显示日期它给我结果 Tue Feb 02 2016 16:02:24 GMT+0530 (IST) 但是我需要表现为 19th January, 2016 如何在ejs中执行此操作？
JavaFX 自定义 ListView
我想问在 JavaFX 中使用自定义对象制作 ListView 的最佳方法，我想要一个每个项目如下所示的列表: 我搜了一下，发现大部分人都是用细胞工厂的方法来做的。有没有其他办法？例如使用客户 fxm

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - Bootstrap 自定义布局