个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
26
4
如何修复 Bootstrap 移动 View 中的间距问题。我的网站在桌面上运行完美，但当我在移动 View 中查看它时，导航栏菜单链接和导航栏本身之间有空格。我在桌面 View 中使用了一些边距，所以我认为这就是它这样做的原因，但我如何让它对两者都起作用？
这是我的 html:
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Champs Haircuts</title>
<link rel="stylesheet" href="bootstrap-3.3.6-dist/css/bootstrap.min.css">
<link rel="stylesheet" href="font-awesome-4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" href="styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="scripts.js"></script>
<script src="bootstrap-3.3.6-dist/js/bootstrap.min.js"></script>
</head>
<body>
<nav id="myNavBar" class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="index.html" class="navbar-brand">
<img class="img-responsive" src="images/logo.png" alt="">
</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right" id="mainNavbar">
<li><a href="services.html">Services & Pricing</a></li>
<li id="contactLink"><a href="contact.html">Contact</a></li>
</ul>
</div>
</div>
</nav>
<div class="modal fade" id="callToActionModal" role="dialog">
<div class="modal-dialog">
<!--Modal content -->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close">×</button>
<h2 class="text-center modal-title">Champs Haircuts</h2>
</div>
<div class="modal-body">
<h2 class="text-center">Call 847-677-2768</h2>
<p class="text-center">5113 Brown St, Skokie, IL 60077</p>
</div>
</div>
</div>
</div>
<header class="jumbotron">
<div class="container">
<div class="row row-header">
<div class="col-xs-12 col-sm-8">
<h1>Welcome to<br> <span>Champs Haircuts.</span></h1>
<br>
<p>Look and Feel Like a Champion.</p>
<br>
<br>
<button id="callToActionBtn" class="btn btn-lg">Make An Appointment</button>
<div style="padding: 20px 20px"></div>
</div>
<div class="col-xs-12 col-sm-4">
<img class="img-responsive" src="images/open-hours.png" alt="open hours" height="420" width="370">
</div>
</div>
</div>
</header>
<div id="about">
<div class="container">
<div class="row">
<div id="aboutDiv" class="col-xs-12 col-sm-4 col-sm-offset-4">
<h1 class="text-center">
Our Story
</h1>
</div>
<div style="padding: 60px 60px"></div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6">
<p>Are you tired of feeling like just another number at your franchise haircut shop? Are you tired of
getting the same disappointing haircut? Have you learned to make peace with it because there
possibly can't be
anything better or maybe that you have reached your max looking good potential? Well if any of those
describe you and you want to change those experiences... Then look no further and enter Champs
Haircuts!
<br><br>
We have 15 years of experience providing excellent hairstyles, quality control, and top of the line
customer service. We are a small shop located in Skokie and we treat you, how you treat you. We
refuse to treat you like just another number. Champs Haircuts... Where you come to look and feel
like a champion.
</p>
</div>
<div class="col-xs-12 col-sm-6">
<div class="text-center">
<a href="https://plus.google.com/100864823698189828429/about?pid=6176986613869798882&oid=100864823698189828429" target="_new">
<img class="img-responsive" src="images/champs-haircuts-lobby.jpg" alt="">
</a>
</div>
</div>
</div>
<hr>
</div>
</div>
<div id="testimonials">
<div class="container">
<div class="row">
<div id="testimonialsHeaderDiv" class="col-xs-12 col-sm-8 col-sm-offset-2">
<h1 class="text-center">
What People Say About Us On
<a class="underline_text" id="testimonialsYelp" href="http://www.yelp.com/biz/champs-haircuts-skokie">Yelp!</a>
</h1>
</div>
</div>
<!--
Copyright (c) 2013 Bootsnipp.com
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
documentation files (the "Software"), to deal in the Software without restriction, including without limitation
the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and
to permit persons to whom the Software is furnished to do so, subject to the following conditions:
-->
<div class="row">
<div class="col-xs-12 col-md-12" data-wow-delay="0.2s">
<div class="carousel slide" data-ride="carousel" id="quote-carousel">
<!-- Bottom Carousel Indicators -->
<ol class="carousel-indicators">
<li data-target="#quote-carousel" data-slide-to="0" class="active"><img class="img-responsive "
src="images/qazi.png"
alt="">
</li>
<li data-target="#quote-carousel" data-slide-to="1"><img class="img-responsive"
src="images/me.png"
alt="">
</li>
<li data-target="#quote-carousel" data-slide-to="2"><img class="img-responsive"
src="images/rand.png"
alt="">
</li>
</ol>
<!-- Carousel Slides / Quotes -->
<div class="carousel-inner text-center">
<!-- Quote 1 -->
<div class="item active">
<blockquote>
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<p>This place is great. Lidija offers exceptional customer service. She is
extremely pleasant, gave me the best haircut I have ever received, and gives
very flattering complements.
Here are the services offered for the price of one haircut:
1. Haircut
2. Shampoo
3. Face/Scalp Massage
Oh my goodness the face massage is heaven. It feels so amazing. I sometimes
want to go back just for the massage... And did I mention I received the
best haircut ever?
Sincerely,
Qazi.
</p>
<small>Qazi</small>
</div>
</div>
</blockquote>
</div>
<!-- Quote 2 -->
<div class="item">
<blockquote>
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<p>All my life, I always went to the neighborhood salon where I received no
haircut that I truly liked. There was always something wrong. Also, they
treated me like a number. I was just another client they needed to get done
with.
I was recommended to try out Champs Haircuts by a good friend of mine who
regularly went here for his haircuts. I was both nervous and excited at the
same time.
Now that I have had my first haircut here, I can confidently say that this
is the best haircut place I have ever been to. The whole experience was just
amazing. I never felt that good after getting a haircut. I guess It's
because I had never received a proper haircut before this.
I recommend everyone to try out Champs Haircuts. Just give it a try. Just
one try. You will not regret it.</p>
<small>Tenzin</small>
</div>
</div>
</blockquote>
</div>
<!-- Quote 3 -->
<div class="item">
<blockquote>
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<p>I initially found out about champ's haircuts by typing "best men's haircut
near me" into a Google search. Based on the positive reviews I decided to
give it a shot. I am extremely glad I did. It's been nearly 4 years since I
started coming here and I have had a quality, professional haircut and
service every time.
Lidija takes her time and makes sure you are satisfied with your haircut
before you leave. You also get a great scalp massage and hot steam towel as
well. I recommend Lidija and champs haircuts to everyone looking for a long
term hair stylist.</p>
<small>Aida</small>
</div>
</div>
</blockquote>
</div>
</div>
<div style="padding: 90px 90px">
</div>
<!-- Carousel Buttons Next/Prev -->
<a data-slide="prev" href="#quote-carousel" class="left carousel-control"><i
class="fa fa-chevron-left"></i></a>
<a data-slide="next" href="#quote-carousel" class="right carousel-control"><i
class="fa fa-chevron-right"></i></a>
</div>
</div>
</div>
</div>
</div>
<br>
<div id="callToActionDiv">
<div class="container">
<div class="text-center">
<button id="callToActionBtnSecondary" class="btn btn-lg">Make An Appointment Now!</button>
</div>
</div>
</div>
<footer>
<div class="container">
<br>
<hr>
<div class="row row-content">
<div class="col-xs-12 col-sm-8">
<ul class="nav navbar-nav">
<li><a href="services.html">Services & Pricing</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<div class="col-xs-12 col-sm-4">
<ul class="nav navbar-nav navbar-right">
<a href="https://plus.google.com/100864823698189828429/about" class="btn btn-circle" target="_new"><i class="fa fa-google-plus fa-2x"></i></a>
<a href="http://www.yelp.com/biz/champs-haircuts-skokie" class="btn btn-circle" target="_new"><i
class="fa fa-yelp fa-2x"></i></a>
</ul>
</div>
</div>
</div>
</footer>
</body>
</html>
这是我的CSS:
html, body {
overflow-x: hidden;
}
body {
padding-top: 100px;
}
#myNavBar {
background-color: #006495;
height: 100px;
}
#myNavBar a {
color: white;
height: 100px;
}
.navbar-brand {
font-size: 2em;
line-height: 70px;
}
#mainNavbar > li {
font-size: 1.1em;
margin-left: 20px;
background-color: #004C70;
height: 50px;
margin-top: 20px;
border-radius: 4px;
}
#mainNavbar > li:hover {
background-color: #0093D1;
}
#mainNavbar > #contactLink {
background-color: #F4D00C;
color: black;
}
#myNavBar span {
background: white;
}
#mainNavbar > #contactLink:hover {
animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 1000px;
}
@keyframes shake {
10%, 90% {
transform: translate3d(-1px, 0, 0);
}
20%, 80% {
transform: translate3d(2px, 0, 0);
}
30%, 50%, 70% {
transform: translate3d(-4px, 0, 0);
}
40%, 60% {
transform: translate3d(4px, 0, 0);
}
}
.navbar-nav > #contactLink > a {
color: #004C70;
font-weight: bold;
}
.jumbotron h1 > span{
color: #006495;
}
#callToActionBtn:hover {
background: #006495;
color: white;
font-weight: bold;
}
#callToActionBtn {
font-weight: bold;
background: white;
color: #3d3d3d;
border: 2px solid #3d3d3d;
}
#aboutDiv {
}
#about h1 {
background: #004C70;
color: white;
padding: 20px 20px;
}
#about p {
font-size: 1.4em;
font-style: normal !important;
color: #666666;
}
/* Carousel */
#quote-carousel {
padding: 0 10px 30px 10px;
margin-top: 30px;
/* Control buttons */
/* Previous button */
/* Next button */
/* Changes the position of the indicators */
/* Changes the color of the indicators */
}
#quote-carousel .carousel-control {
background: none;
color: #CACACA;
font-size: 2.3em;
text-shadow: none;
margin-top: 30px;
}
#quote-carousel .carousel-control.left {
left: -60px;
}
#quote-carousel .carousel-control.right {
right: -60px;
}
#quote-carousel .carousel-indicators {
right: 50%;
top: auto;
bottom: 0px;
margin-right: -19px;
}
#quote-carousel .carousel-indicators li {
width: 50px;
height: 50px;
margin: 5px;
cursor: pointer;
border: 4px solid #CCC;
border-radius: 50px;
opacity: 0.4;
overflow: hidden;
transition: all 0.4s;
}
#quote-carousel .carousel-indicators .active {
background: #333333;
width: 128px;
height: 128px;
border-radius: 100px;
border-color: #f33;
opacity: 1;
overflow: hidden;
}
.carousel-inner {
min-height: 300px;
}
.item blockquote {
border-left: none;
margin: 0;
}
.item blockquote p:before {
content: "\f10d";
font-family: 'Fontawesome';
float: left;
margin-right: 10px;
}
#testimonialsHeaderDiv {
height: 100px;
transform: skew(-20deg);
}
#testimonials h1 {
background: #004C70;
color: white;
padding: 20px 20px;
}
#testimonials h1 a {
color: #F2635F;
}
#testimonials h1 a:hover {
cursor: pointer;
text-decoration: none;
}
.underline_text {
border-bottom: solid 2px #F2635F;
display: inline;
padding-bottom: 3px;
}
#calltoactiondiv {
background: #eeeeee;
padding: 20px 20px;
color: #333333;
}
#callToActionBtnSecondary:hover {
background: #006495;
color: white;
font-weight: bold;
}
#callToActionBtnSecondary {
font-weight: bold;
background: white;
color: #3d3d3d;
border: 2px solid #3d3d3d;
padding: 20px 35px;
}
footer .navbar-nav li{
margin-right: 20px;
}
#servicesHeader {
background: #006495;
color: #ffffff;
padding: 10px 10px;
}
/* Contact Page Styles */
#contactHeader {
background: #006495;
color: #ffffff;
padding: 10px 10px;
}
.form-horizontal input {
font-size: 1.7em;
height: 50px;
}
.form-horizontal input {
outline: none;
border-bottom: 1px solid rgb(198, 198, 198);
border-top: none;
border-right: none;
border-left: none;
box-shadow: none;
}
.form-horizontal input:focus {
border-bottom: solid 4px #F2635F;
}
.form-horizontal textarea {
font-size: 1.5em;
border-bottom: 1px solid rgb(198, 198, 198);
border-top: none;
border-right: none;
border-left: none;
box-shadow: none;
}
.form-horizontal textarea:focus {
border-bottom: solid 4px #F2635F;
}
/*
.form-horizontal p {
color: rgb(93, 107, 125);
font-size: 1.4em;
}
*/
#contactDescription {
color: rgb(93, 107, 125);
font-size: 1.4em;
}
.form-horizontal button {
background: #006495;
color: #eeeeee;
}
.form-horizontal button:hover {
background: #F2635F;
color: #F4D00C;
}
.form-control::-webkit-input-placeholder { color: rgb(93, 107, 125); }
.form-control:-moz-placeholder { color: rgb(93, 107, 125);}
.form-control::-moz-placeholder { color: rgb(93, 107, 125); }
.form-control:-ms-input-placeholder { color: rgb(93, 107, 125); }
/* Services and Pricing */
.services h2 {
color: #636466;
}
.price {
color: #636466;
font-size: 1.5em;
margin-top: 20px;
}
.serviceDescription {
font-size: 1.1em;
}
我尝试在 stackoverflow 和其他资源上查找它，但没有任何内容符合我的确切情况。我还尝试对小于 480 像素的屏幕大小使用媒体查询。它仍然不起作用。预先感谢您的帮助。
最佳答案
Please add this in your custome css file
@media screen and (max-width: 768px) {
#myNavBar {background-color: #006495;height: auto;padding: 12px 0px;}
.navbar-header{ height: 74px;}
#myNavBar a{height:auto;}
.navbar-nav {margin: 0px auto !important;}
#mainNavbar > li {margin-left: 0px;border-radius: 4px;margin-top:7px;}
#callToActionBtnSecondary{padding: 10px;}
#calltoactiondiv{padding:10px;}
#testimonials h1{padding: 0px;margin: 0px auto;}
.jumbotron{padding-top:0px !important;}
}
关于html - 自定义样式后，Bootstrap Navbar 在移动 View 中无法正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37873852/
26
4
0
好的，所以我编辑了以下... 只需将以下内容放入我的 custom.css #rt-utility .rt-block {CODE HERE} 但是当我尝试改变... 与 #rt-sideslid
在表格 View 中，我有一个自定义单元格(在界面生成器中高度为 500)。在该单元格中，我有一个 Collection View ，我按 (10,10,10,10) 固定到边缘。但是在 tablev
对于我的无能，我很抱歉，但总的来说，我对 Cocoa、Swift 和面向对象编程还很陌生。我的主要来源是《Cocoa Programming for OS X》(第 5 版)，以及 Apple 的充满
我正在使用 meta-tegra 为我的 NVIDIA Jetson Nano 构建自定义图像。我需要 PyTorch，但没有它的配方。我在设备上构建了 PyTorch，并将其打包到设备上的轮子中。现
在 jquery 中使用 $.POST 和 $.GET 时，有没有办法将自定义变量添加到 URL 并发送它们？我尝试了以下方法: $.ajax({type:"POST", url:"file.php?
Traefik 已经默认实现了很多中间件，可以满足大部分我们日常的需求，但是在实际工作中，用户仍然还是有自定义中间件的需求，为解决这个问题，官方推出了一个 Traefik Pilot[1] 的功
我想让我的 CustomTextInputLayout 将 Widget.MaterialComponents.TextInputLayout.OutlinedBox 作为默认样式，无需在 XML 中
我在 ~/.emacs 中有以下自定义函数: (defun xi-rgrep (term) (grep-compute-defaults) (interactive "sSearch Te
我有下表: 考虑到每个月的权重，我的目标是在 5 个月内分散 10,000 个单位。与 10,000 相邻的行是我最好的尝试(我在这上面花了几个小时)。黄色是我所追求的。 我试图用来计算的逻辑如下:计
我的表单中有一个字段，它是文件类型。当用户点击保存图标时，我想自然地将文件上传到服务器并将文件名保存在数据库中。我尝试通过回显文件名来测试它，但它似乎不起作用。另外，如何将文件名添加到数据库中？是在模
我有一个 python 脚本来发送电子邮件，它工作得很好，但问题是当我检查我的电子邮件收件箱时。 我希望该用户名是自定义用户名，而不是整个电子邮件地址。 最佳答案 发件人地址应该使用的格式是: You
我想减小 ggcorrplot 中标记的大小，并减少文本和绘图之间的空间。 library(ggcorrplot) data(mtcars) corr <- round(cor(mtcars), 1)
GTK+ noob 问题在这里: 是否可以自定义 GtkFileChooserButton 或 GtkFileChooserDialog 以删除“位置”部分(左侧)和顶部的“位置”输入框？ 我实际上要
我正在尝试在主页上使用 ajax 在 magento 中使用 ajax 显示流行的产品列表，我可以为 5 或“N”个产品执行此操作，但我想要的是将分页工具栏与结果集一起添加. 这是我添加的以显示流行产
我正在尝试使用 PasswordResetForm 内置函数。 由于我想要自定义表单字段，因此我编写了自己的表单: class FpasswordForm(PasswordResetForm):
据我了解，新的 Angular 7 提供了拖放功能。我搜索了有关 DnD 的 Tree 组件，但没有找到与树相关的内容。 我在 Stackblitz 上找到的一个工作示例.对比drag'ndrop功能
我必须开发一个自定义选项卡控件并决定使用 WPF/XAML 创建它，因为我无论如何都打算学习它。完成后应该是这样的: 到目前为止，我取得了很好的进展，但还有两个问题: 只有第一个/最后一个标签项应该有
我要定制xtable用于导出到 LaTeX。我知道有些问题是关于 xtable在这里，但我找不到我要找的具体东西。 以下是我的表的外观示例: my.table <- data.frame(Specif
用ejs在这里显示日期 它给我结果 Tue Feb 02 2016 16:02:24 GMT+0530 (IST) 但是我需要表现为 19th January, 2016 如何在ejs中执行此操作？
我想问在 JavaFX 中使用自定义对象制作 ListView 的最佳方法，我想要一个每个项目如下所示的列表: 我搜了一下，发现大部分人都是用细胞工厂的方法来做的。有没有其他办法？例如使用客户 fxm
我是一名优秀的程序员,十分优秀！