即使相同的代码在codepen上工作正常，它也不会在本地文件上运行。导航栏假设在顶部时是透明的，但在向下滚动时应该变为黑色。我怀疑它可能是我链接bootstrap和其他外部文件的方式，但问题可能在导航栏上。
以下是代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Silverstein | Law Firm</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!--The Styling Files-->
<link href="costume.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Lora|Playfair+Display" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
<a class="navbar-brand" href="#"><img src="https://s2.postimg.org/6ewd0j4yx/logo.png" id="logo"></a> </div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav pull-right">
<li><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#results">Results</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>
<!--Jumbotron-->
<div class="jumbotron" id="main-jumb"> <img src="https://s17.postimg.org/54y6cxqzz/background2.jpg" class="jumbotron-image">
<h1 class="text-center" id="h1central">"it is not wisdom <br>
but authority that makes a law"</h1>
</div>
<!--End Jambotron-->
<!--About-->
<div class="container" id="about">
<div class="row">
<div class="col-md-6"> <img src="http://www.wcsr.com/~/media/Images/WCSR/Lawyers/Photos/Jeffrey%20T%20Lawyer.png" id="lawyer-pic" class="img-responsive"> </div>
<div class="col-md-6">
<p id="p-about"><a name="about" id="about-h"></a>GEORGIOS P. SILVERSTEIN practices in the area of real property litigation, with a particular focus on eminent domain, inverse condemnation, California Environmental Quality Act (CEQA), land use, zoning and planning, Public Records Act, Brown Act, and government and municipal litigation.<br>
<br>
Mr. Silverstein graduated magna cum laude from the University of California at Los Angeles in 1990 with a Bachelor of Arts degree in English. He is a member of Phi Beta Kappa.<br>
<br>
Mr. Silverstein received his Juris Doctor degree in 1996 from the University of California, Hastings College of the Law. At Hastings, Mr. Silverstein received the American Jurisprudence Award in Legal Writing and Research, and was an Articles Editor of the Hastings International and Comparative Law Review.<br>
<br>
Mr. Silverstein is a member of the Litigation Section and Real Property Sections of the California State and Los Angeles County Bar Associations, and is a member of the Eminent Domain and Land Valuation Committee of the Los Angeles County Bar Association.<br>
<br>
Mr. Silverstein has been featured in numerous publications regarding his advocacy on behalf of clients, including in the Los Angeles Times and Los Angeles Business Journal. In April 1998, Mr. Silverstein was featured in the Los Angeles Daily Journal and San Francisco Daily Journal in a Litigator Profile and Case In Focus article.</p>
</div>
</div>
</div>
<!--End About-->
<!--Service-->
<div class="container-fluid" id="service">
<div class="row">
<div class="col-md-6">
<p id="p-service"><a name="services" id="services-h"></a>Swift access to high quality and cost effective legal services across Europe, the Americas, Asia, Oceania and the Middle East.<br>
<br>
High standard legal consultancy in more than 7 languages (Greek, English, French, German, Italian, Spanish, Russian, Arabic).<br>
<br>
Specialism, showcased experience in a wide range of legal disciplines and extensive expertise gained through our involvement with a diverse clientele (major corporations and banks, private and public institutions, business associations, high net worth individuals, government and quasi government bodies).<br>
<br>
A well-organized associate’s network, composed by both in-house and external solicitors, notaries, accountants, tax experts, auditors, civil engineers, topographers, translators, realtors, IT consultants, business advisors, possessing the knowledge, the connections and the qualifications to provide an all-in-one package of consultancy services meeting your needs however diverse.<br>
<br>
The competitive advantage to work with the latest technology (cloud computing, up-to-date equipment, smart electronic devises, upgraded business solutions software) as a modern business in an increasingly digital economy.<br>
<br>
</p>
</div>
</div>
</div>
<!--End Service-->
<!--Results-->
<div class="container" id="quote-container">
<div class="row">
<div class="col-md-offset-2 col-md-8">
<h1 class="text-center" id="h1-results">What our clients say</h1>
</div>
</div>
<div class="row" id="quote-row">
<div class="col-md-offset-1col-md-10">
<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"></li>
<li data-target="#quote-carousel" data-slide-to="1"></li>
<li data-target="#quote-carousel" data-slide-to="2"></li>
</ol>
<!-- Carousel Slides / Quotes -->
<div class="carousel-inner">
<!-- Quote 1 -->
<div class="item active">
<blockquote>
<div class="row">
<div class="col-md-offset-1 col-md-10"> <a name="results" id="results-h"></a>
<p class="p-results">We have turned to Georgios Silverstein on a number of our most significant and complex litigation matters, involving a broad array of issues in jurisdictions around the world. The firm has consistently responded with superior work, impeccable client service and tangible positive results.</p>
<i class="fa fa-quote-right" aria-hidden="true"></i> <small>Michael W. Leahy<br>
<i>Deputy General Counsel, American International Group, Inc.</i></small> </div>
</div>
</blockquote>
</div>
<!--Quote 2-->
<div class="item">
<blockquote>
<div class="row">
<div class="col-md-offset-1 col-md-10">
<p class="p-results">When I have ‘bet-the-company’ litigation or need novel solutions to complex legal problems, I call Georgios Silverstein.</p>
<i class="fa fa-quote-right" aria-hidden="true"></i> <small>T. Warren Jackson<br>
<i>Vice President and Associate General Counsel, DIRECTV Group</i></small> </div>
</div>
</blockquote>
</div>
<!--Quote 3-->
<div class="item">
<blockquote>
<div class="row">
<div class="col-md-offset-1 col-md-10">
<p class="p-results">We have looked to Georgios Silverstein for our most important IP matters for many years, and we are glad to have done so. Their winning results and commitment to service have been everything we could have hoped for.</p>
<i class="fa fa-quote-right" aria-hidden="true"></i> <small> Alf R. Andersen<br>
<i> Assistant General Counsel, Epson America, Inc. </i></small> </div>
</div>
</blockquote>
</div>
</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>
<!--End Results-->
<!--News-->
<div class="container-fluid" id="news">
<div class="row">
<div class="col-md-offset-4 col-md-4">
<h1 class="text-center" id="h1-news">Our News</h1>
</div>
</div>
<div class="row">
<div class="col-md-3"> <a href="#" class="thumbnail"> <img src="https://s11.postimg.org/qrjascv6b/Legal_scale-300x270.jpg">
<h3 class="h3-news-thumb">Changes in the law for divorce</h3>
</a> </div>
<div class="col-md-3"> <a href="#" class="thumbnail"> <img src="https://s11.postimg.org/qrjascv6b/Legal_scale-300x270.jpg">
<h3 class="h3-news-thumb">99% success rate in 2016</h3>
</a> </div>
<div class="col-md-3"> <a href="#" class="thumbnail"> <img src="https://s11.postimg.org/qrjascv6b/Legal_scale-300x270.jpg">
<h3 class="h3-news-thumb">Silverstein LLC best law firm in SoCal accodring...</h3>
</a> </div>
<div class="col-md-3"> <a href="#" class="thumbnail"> <img src="https://s11.postimg.org/qrjascv6b/Legal_scale-300x270.jpg">
<h3 class="h3-news-thumb">Free consultation for low income individuals</h3>
</a> </div>
</div>
<div class="row">
<div class="col-md-3"> <a href="#" class="thumbnail"> <img src="https://s11.postimg.org/qrjascv6b/Legal_scale-300x270.jpg">
<h3 class="h3-news-thumb">CNN appoints new legal head to replace...</h3>
</a> </div>
<div class="col-md-3"> <a href="#" class="thumbnail"> <img src="https://s11.postimg.org/qrjascv6b/Legal_scale-300x270.jpg">
<h3 class="h3-news-thumb">Top 10 Southern California law firms</h3>
</a> </div>
<div class="col-md-3"> <a href="#" class="thumbnail"> <img src="https://s11.postimg.org/qrjascv6b/Legal_scale-300x270.jpg">
<h3 class="h3-news-thumb">New member in our legal team</h3>
</a> </div>
<div class="col-md-3"> <a href="#" class="thumbnail"> <img src="https://s11.postimg.org/qrjascv6b/Legal_scale-300x270.jpg">
<h3 class="h3-news-thumb">Immigration status for foreigners</h3>
</a> </div>
</div>
<div class="raw text-center">
<button class="btn-default" id="news-more-button">More</button>
</div>
</div>
<!--End News-->
<footer>
<p class="pull-left" id="copyright">©Cosmos 2017</p>
</footer>
<script src="js/code-js.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
这里的CSS：
@charset "utf-8";
/* CSS Document */
body {
padding: 0;
}
/*Navigation*/
.navbar-default {
background-color: transparent;
background-image: none;
background-repeat: no-repeat;
border-color: transparent;
filter: none;
}
.navbar-default .navbar-nav > li > a {
color: white;
}
.navbar-default .nav .active > a, .navbar-default .nav .active > a:hover, .navbar-default .nav .active > a:focus {
background-color: transparent;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.navbar-fixed-top.scrolled {
background: black;
}
#logo {
width: 25%;
}
/*Jambotron*/
#main-jumb {
padding: 0;
}
.jumbotron-image {
width: 100%;
max-width: 100%;
height: auto;
}
#h1central {
position: absolute;
top: 40%;
left: 22%;
color: #f1f0f0;
text-transform: uppercase;
font-family: 'Lora', serif;
font-size: 3vw;
}
/*About*/
#about {
clear: both;
}
#lawyer-pic {
margin-top: 18%;
}
#p-about {
margin-top: 13%;
line-height: 120%;
font-family: 'Playfair Display', serif;
font-size: 1.2em;
}
#about-h {
visibility: hidden;
}
/*Service*/
#service {
margin-top: 8%;
background-image: url("https://s4.postimg.org/u0kx217od/services.jpg");
background-size: cover;
font-family: 'Playfair Display', serif;
}
#p-service {
margin-top: 10%;
margin-bottom: 10%;
padding: 2%;
color: black;
background-color: rgba(255,255,255,0.5);
font-size: 1.1em;
}
#service-h {
visibility: hidden;
}
/*Results*/
/* carousel */
#quote-container {
margin-top: 4%;
padding-bottom: 8%;
max-height: 600px;
min-height: 600px;
}
#quote-row {
margin-top: 3%;
}
#h1-results {
font-family: 'Lora', serif;
border-top: 2px solid black;
border-bottom: 2px solid black;
}
.p-results {
font-size: 1.5em;
}
#quote-carousel {
padding: 0 10px 30px 10px;
margin-top: 30px 0px 0px;
}
/* Control buttons */
#quote-carousel .carousel-control {
background: none;
color: #222;
font-size: 2.3em;
text-shadow: none;
margin-top: 30px;
}
/* Previous button */
#quote-carousel .carousel-control.left {
left: -12px;
}
/* Next button */
#quote-carousel .carousel-control.right {
right: -12px !important;
}
/* Changes the position of the indicators */
#quote-carousel .carousel-indicators {
right: 50%;
top: auto;
bottom: 0px;
margin-right: -19px;
}
/* Changes the color of the indicators */
#quote-carousel .carousel-indicators li {
background: #c0c0c0;
}
#quote-carousel .carousel-indicators .active {
background: #333333;
}
#quote-carousel img {
width: 250px;
height: 100px
}
/* End carousel */
.item blockquote {
border-left: none;
margin: 0;
}
.item blockquote img {
margin-bottom: 10px;
}
.item blockquote p:before {
content: "\f10d";
font-family: 'Fontawesome';
float: left;
margin-right: 10px;
}
/**
MEDIA QUERIES
*/
/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
#quote-carousel {
margin-bottom: 0;
padding: 0 40px 30px 40px;
margin-top: 30px;
}
}
/* Small devices (tablets, up to 768px) */
@media (max-width: 768px) {
/* Make the indicators larger for easier clicking with fingers/thumb on mobile */
#quote-carousel .carousel-indicators {
bottom: -20px !important;
}
#quote-carousel .carousel-indicators li {
display: inline-block;
margin: 0px 5px;
width: 15px;
height: 15px;
}
#quote-carousel .carousel-indicators li.active {
margin: 0px 5px;
width: 20px;
height: 20px;
}
}
/*News*/
#news {
background-color: #070A13;
height: 100%;
padding-top: 1%;
padding-bottom: 4%;
}
#h1-news {
margin-bottom: 10%;
color: white;
font-family: 'Lora', serif;
}
#news-more-button {
padding: 0.5% 2% 0.5% 2%;
font-size: 1.5em;
color: white;
background-color: transparent;
}
/*Footer*/
#copyright {
clear: both;
color: #f1f0f0;
margin-top: 13%;
}
答案 0 :(得分：2)
如果您不介意使用JQuery，请将其添加到<script>标记中
$(window).scroll(function() {
if ($(this).scrollTop() > 1){
$('nav').addClass("scroll");
}
else{
$('nav').removeClass("scroll");
}
});
将此添加到您的CSS（任何地方）
nav.navbar-fixed-top {
-webkit-transition: background-color 0.3s ease-out;
-moz-transition: background-color 0.3s ease-out;
-o-transition: background-color 0.3s ease-out;
transition: background-color 0.3s ease-out;
background-color: transparent;
}
nav.scroll {
background-color: black;
}
在<head>标记中添加JQuery链接：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
$(window).scroll(function() {
if ($(this).scrollTop() > 1){
$('nav').addClass("scroll");
}
else{
$('nav').removeClass("scroll");
}
});@charset "utf-8";
/* CSS Document */
body {
padding: 0;
}
/*Navigation*/
.navbar-default {
background-color: transparent ;
background-image: none;
background-repeat: no-repeat;
border-color: transparent;
filter: none;
}
.navbar-default .navbar-nav>li>a {
color: white;
}
.navbar-default .nav .active>a,
.navbar-default .nav .active>a:hover,
.navbar-default .nav .active>a:focus {
background-color: transparent;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.navbar-fixed-top.scrolled {
background: black;
}
#logo {
width: 25%;
}
/*Jambotron*/
#main-jumb {
padding: 0;
}
.jumbotron-image {
width: 100%;
max-width: 100%;
height: auto;
}
#h1central {
position: absolute;
top: 40%;
left: 22%;
color: #f1f0f0;
text-transform: uppercase;
font-family: 'Lora', serif;
font-size: 3vw;
}
/*About*/
#about {
clear: both;
}
#lawyer-pic {
margin-top: 18%;
}
#p-about {
margin-top: 13%;
line-height: 120%;
font-family: 'Playfair Display', serif;
font-size: 1.2em;
}
#about-h {
visibility: hidden;
}
/*Service*/
#service {
margin-top: 8%;
background-image: url("https://s4.postimg.org/u0kx217od/services.jpg");
background-size: cover;
font-family: 'Playfair Display', serif;
}
#p-service {
margin-top: 10%;
margin-bottom: 10%;
padding: 2%;
color: black;
background-color: rgba(255, 255, 255, 0.5);
font-size: 1.1em;
}
#service-h {
visibility: hidden;
}
/*Results*/
/* carousel */
#quote-container {
margin-top: 4%;
padding-bottom: 8%;
max-height: 600px;
min-height: 600px;
}
#quote-row {
margin-top: 3%;
}
#h1-results {
font-family: 'Lora', serif;
border-top: 2px solid black;
border-bottom: 2px solid black;
}
.p-results {
font-size: 1.5em;
}
#quote-carousel {
padding: 0 10px 30px 10px;
margin-top: 30px 0px 0px;
}
/* Control buttons */
#quote-carousel .carousel-control {
background: none;
color: #222;
font-size: 2.3em;
text-shadow: none;
margin-top: 30px;
}
/* Previous button */
#quote-carousel .carousel-control.left {
left: -12px;
}
/* Next button */
#quote-carousel .carousel-control.right {
right: -12px !important;
}
/* Changes the position of the indicators */
#quote-carousel .carousel-indicators {
right: 50%;
top: auto;
bottom: 0px;
margin-right: -19px;
}
/* Changes the color of the indicators */
#quote-carousel .carousel-indicators li {
background: #c0c0c0;
}
#quote-carousel .carousel-indicators .active {
background: #333333;
}
#quote-carousel img {
width: 250px;
height: 100px
}
/* End carousel */
.item blockquote {
border-left: none;
margin: 0;
}
.item blockquote img {
margin-bottom: 10px;
}
.item blockquote p:before {
content: "\f10d";
font-family: 'Fontawesome';
float: left;
margin-right: 10px;
}
/**
MEDIA QUERIES
*/
/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
#quote-carousel {
margin-bottom: 0;
padding: 0 40px 30px 40px;
margin-top: 30px;
}
}
/* Small devices (tablets, up to 768px) */
@media (max-width: 768px) {
/* Make the indicators larger for easier clicking with fingers/thumb on mobile */
#quote-carousel .carousel-indicators {
bottom: -20px !important;
}
#quote-carousel .carousel-indicators li {
display: inline-block;
margin: 0px 5px;
width: 15px;
height: 15px;
}
#quote-carousel .carousel-indicators li.active {
margin: 0px 5px;
width: 20px;
height: 20px;
}
}
/*News*/
#news {
background-color: #070A13;
height: 100%;
padding-top: 1%;
padding-bottom: 4%;
}
#h1-news {
margin-bottom: 10%;
color: white;
font-family: 'Lora', serif;
}
#news-more-button {
padding: 0.5% 2% 0.5% 2%;
font-size: 1.5em;
color: white;
background-color: transparent;
}
nav.navbar-fixed-top {
-webkit-transition: background-color 0.3s ease-out;
-moz-transition: background-color 0.3s ease-out;
-o-transition: background-color 0.3s ease-out;
transition: background-color 0.3s ease-out;
background-color: transparent;
}
nav.scroll {
background-color: black;
}
/*Footer*/
#copyright {
clear: both;
color: #f1f0f0;
margin-top: 13%;
}<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<meta charset="utf-8">
<title>Silverstein | Law Firm</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!--The Styling Files-->
<link href="costume.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Lora|Playfair+Display" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
<a class="navbar-brand" href="#"><img src="https://s2.postimg.org/6ewd0j4yx/logo.png" id="logo"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav pull-right">
<li><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#results">Results</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>
<!--Jumbotron-->
<div class="jumbotron" id="main-jumb"> <img src="https://s17.postimg.org/54y6cxqzz/background2.jpg" class="jumbotron-image">
<h1 class="text-center" id="h1central">"it is not wisdom <br> but authority that makes a law"</h1>
</div>
<!--End Jambotron-->
<!--About-->
<div class="container" id="about">
<div class="row">
<div class="col-md-6"> <img src="http://www.wcsr.com/~/media/Images/WCSR/Lawyers/Photos/Jeffrey%20T%20Lawyer.png" id="lawyer-pic" class="img-responsive"> </div>
<div class="col-md-6">
<p id="p-about">
<a name="about" id="about-h"></a>GEORGIOS P. SILVERSTEIN practices in the area of real property litigation, with a particular focus on eminent domain, inverse condemnation, California Environmental Quality Act (CEQA), land use, zoning and planning, Public Records Act, Brown
Act, and government and municipal litigation.<br>
<br> Mr. Silverstein graduated magna cum laude from the University of California at Los Angeles in 1990 with a Bachelor of Arts degree in English. He is a member of Phi Beta Kappa.<br>
<br> Mr. Silverstein received his Juris Doctor degree in 1996 from the University of California, Hastings College of the Law. At Hastings, Mr. Silverstein received the American Jurisprudence Award in Legal Writing and Research, and was an Articles
Editor of the Hastings International and Comparative Law Review.<br>
<br> Mr. Silverstein is a member of the Litigation Section and Real Property Sections of the California State and Los Angeles County Bar Associations, and is a member of the Eminent Domain and Land Valuation Committee of the Los Angeles County
Bar Association.<br>
<br> Mr. Silverstein has been featured in numerous publications regarding his advocacy on behalf of clients, including in the Los Angeles Times and Los Angeles Business Journal. In April 1998, Mr. Silverstein was featured in the Los Angeles
Daily Journal and San Francisco Daily Journal in a Litigator Profile and Case In Focus article.</p>
</div>
</div>
</div>
<!--End About-->
<!--Service-->
<div class="container-fluid" id="service">
<div class="row">
<div class="col-md-6">
<p id="p-service">
<a name="services" id="services-h"></a>Swift access to high quality and cost effective legal services across Europe, the Americas, Asia, Oceania and the Middle East.<br>
<br> High standard legal consultancy in more than 7 languages (Greek, English, French, German, Italian, Spanish, Russian, Arabic).<br>
<br> Specialism, showcased experience in a wide range of legal disciplines and extensive expertise gained through our involvement with a diverse clientele (major corporations and banks, private and public institutions, business associations,
high net worth individuals, government and quasi government bodies).<br>
<br> A well-organized associate’s network, composed by both in-house and external solicitors, notaries, accountants, tax experts, auditors, civil engineers, topographers, translators, realtors, IT consultants, business advisors, possessing the
knowledge, the connections and the qualifications to provide an all-in-one package of consultancy services meeting your needs however diverse.<br>
<br> The competitive advantage to work with the latest technology (cloud computing, up-to-date equipment, smart electronic devises, upgraded business solutions software) as a modern business in an increasingly digital economy.<br>
<br>
</p>
</div>
</div>
</div>
<!--End Service-->
<!--Results-->
<div class="container" id="quote-container">
<div class="row">
<div class="col-md-offset-2 col-md-8">
<h1 class="text-center" id="h1-results">What our clients say</h1>
</div>
</div>
<div class="row" id="quote-row">
<div class="col-md-offset-1col-md-10">
<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"></li>
<li data-target="#quote-carousel" data-slide-to="1"></li>
<li data-target="#quote-carousel" data-slide-to="2"></li>
</ol>
<!-- Carousel Slides / Quotes -->
<div class="carousel-inner">
<!-- Quote 1 -->
<div class="item active">
<blockquote>
<div class="row">
<div class="col-md-offset-1 col-md-10">
<a name="results" id="results-h"></a>
<p class="p-results">We have turned to Georgios Silverstein on a number of our most significant and complex litigation matters, involving a broad array of issues in jurisdictions around the world. The firm has consistently responded with superior work,
impeccable client service and tangible positive results.</p>
<i class="fa fa-quote-right" aria-hidden="true"></i> <small>Michael W. Leahy<br>
<i>Deputy General Counsel, American International Group, Inc.</i></small> </div>
</div>
</blockquote>
</div>
<!--Quote 2-->
<div class="item">
<blockquote>
<div class="row">
<div class="col-md-offset-1 col-md-10">
<p class="p-results">When I have ‘bet-the-company’ litigation or need novel solutions to complex legal problems, I call Georgios Silverstein.</p>
<i class="fa fa-quote-right" aria-hidden="true"></i> <small>T. Warren Jackson<br>
<i>Vice President and Associate General Counsel, DIRECTV Group</i></small> </div>
</div>
</blockquote>
</div>
<!--Quote 3-->
<div class="item">
<blockquote>
<div class="row">
<div class="col-md-offset-1 col-md-10">
<p class="p-results">We have looked to Georgios Silverstein for our most important IP matters for many years, and we are glad to have done so. Their winning results and commitment to service have been everything we could have hoped for.</p>
<i class="fa fa-quote-right" aria-hidden="true"></i> <small> Alf R. Andersen<br>
<i> Assistant General Counsel, Epson America, Inc. </i></small> </div>
</div>
</blockquote>
</div>
</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>
<!--End Results-->
<!--News-->
<div class="container-fluid" id="news">
<div class="row">
<div class="col-md-offset-4 col-md-4">
<h1 class="text-center" id="h1-news">Our News</h1>
</div>
</div>
<div class="row">
<div class="col-md-3">
<a href="#" class="thumbnail"> <img src="https://s11.postimg.org/qrjascv6b/Legal_scale-300x270.jpg">
<h3 class="h3-news-thumb">Changes in the law for divorce</h3>
</a>
</div>
<div class="col-md-3">
<a href="#" class="thumbnail"> <img src="https://s11.postimg.org/qrjascv6b/Legal_scale-300x270.jpg">
<h3 class="h3-news-thumb">99% success rate in 2016</h3>
</a>
</div>
<div class="col-md-3">
<a href="#" class="thumbnail"> <img src="https://s11.postimg.org/qrjascv6b/Legal_scale-300x270.jpg">
<h3 class="h3-news-thumb">Silverstein LLC best law firm in SoCal accodring...</h3>
</a>
</div>
<div class="col-md-3">
<a href="#" class="thumbnail"> <img src="https://s11.postimg.org/qrjascv6b/Legal_scale-300x270.jpg">
<h3 class="h3-news-thumb">Free consultation for low income individuals</h3>
</a>
</div>
</div>
<div class="row">
<div class="col-md-3">
<a href="#" class="thumbnail"> <img src="https://s11.postimg.org/qrjascv6b/Legal_scale-300x270.jpg">
<h3 class="h3-news-thumb">CNN appoints new legal head to replace...</h3>
</a>
</div>
<div class="col-md-3">
<a href="#" class="thumbnail"> <img src="https://s11.postimg.org/qrjascv6b/Legal_scale-300x270.jpg">
<h3 class="h3-news-thumb">Top 10 Southern California law firms</h3>
</a>
</div>
<div class="col-md-3">
<a href="#" class="thumbnail"> <img src="https://s11.postimg.org/qrjascv6b/Legal_scale-300x270.jpg">
<h3 class="h3-news-thumb">New member in our legal team</h3>
</a>
</div>
<div class="col-md-3">
<a href="#" class="thumbnail"> <img src="https://s11.postimg.org/qrjascv6b/Legal_scale-300x270.jpg">
<h3 class="h3-news-thumb">Immigration status for foreigners</h3>
</a>
</div>
</div>
<div class="raw text-center">
<button class="btn-default" id="news-more-button">More</button>
</div>
</div>
<!--End News-->
<footer>
<p class="pull-left" id="copyright">©Cosmos 2017</p>
</footer>
<script src="js/code-js.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
答案 1 :(得分：0)
检查codepen上的依赖项，也许你需要一些JS文件
答案 2 :(得分：0)
没关系。我找到了解决方案。它不是样式文件的顺序，而是js和jquery文件的顺序。它现在工作正常。不管怎样，谢谢！