个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我从 Bootstrap 获得了这个模板，但我意识到侧面有额外的填充/边距。我不知道我的 CSS 是哪一部分出了问题。
在第二页，我想去掉边上的空白，我需要它全是蓝色的。
.site-wrapper {
display: table;
width: 100%;
height: auto; /* For at least Firefox */
min-height: 100%;
}
.site-wrapper-inner {
display: table-cell;
vertical-align: middle;
}<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Pacific American School | 亞太美國學校</title>
<!-- Bootstrap -->
<link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<!-- My CSS -->
<link href="style.css" rel="stylesheet">
<!-- Favicon -->
<link rel="shortcut icon" type="image/ico" href="photos/Favicon PAS.png" />
<!-- GOOGLE FONTS -->
<link href="https://fonts.googleapis.com/css?family=Cormorant+Garamond" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Oswald:200,300,400,500,600,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Muli:200,400,700,800,900" rel="stylesheet">
<!-- FONT AWESOME -->
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="site-wrapper">
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="#">Pacific American School</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">
<li><a href="#">About</a></li>
<li class="active"><a href="#">Academics</a></li>
<li><a href="#">Exclusive</a></li>
<li><a href="#">Student Life</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Admissions</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="cover-container">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
</ol> <!-- CAROUSEL-INDICATORS -->
<div class="content-container" id="updates">
<h1>K-12 OPEN HOUSE 2017</h1>
<div class="container-fluid">
<h2>Date: 4/8, 4/22, 5/6, 6/22</h2>
<h2>Time: 2pm - 4pm</h2>
<button type="button" class="btn btn-default"><a href="https://docs.google.com/forms/d/e/1FAIpQLScHMIAZuriC8_MSdsmJfY772KS3LEdgh2PYCwit1hZ3LZclGg/viewform?c=0&w=1" target="_blank">Attend!</a></button>
</div> <!-- CONTAINER-FLUID -->
</div> <!-- OPEN-HOUSE-INFO -->
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active" style="background-image: url(photos/JO2_2978.JPG);">
</div>
<div class="item" style="background-image: url(photos/DSC02620.JPG);"></div>
<div class="item" style="background-image: url(photos/JO2_2960.JPG);"></div>
<div class="item" style="background-image: url(photos/17GradTripBali-272.jpg);"></div>
</div> <!-- CAROUSEL-INNER -->
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div> <!-- CAROUSEL SLIDE -->
</div> <!-- COVER-CONTAINER -->
<div class="container-fluid">
<div class="row" id="home-info">
<div class="col-md-3" id="navy1">
<div class="site-wrapper">
<div class="site-wrapper-inner">
<a><i class="fa fa-newspaper-o fa-3x" aria-hidden="true"></i></a>
<p>Learn more about our recent events and news!</p>
</div>
</div>
</div>
<div class="col-md-3" id="navy2">
<div class="site-wrapper">
<div class="site-wrapper-inner">
<a href="hhttps://drive.google.com/file/d/0B1LpcXUSvbG1VjA3ck1pWVRjSTg/view" target="_blank"><i class="fa fa-calendar fa-3x" aria-hidden="true"></i></a>
<p>Stay up to date! Get the school's calendar here!</p>
</div>
</div>
</div>
<div class="col-md-3" id="navy1">
<div class="site-wrapper">
<div class="site-wrapper-inner">
<a href="https://www.facebook.com/pacificamerican.org/" target="_blank"><i class="fa fa-facebook-square fa-3x" aria-hidden="true"></i></a>
<p>Like and connect with us via Facebook!</p>
</div>
</div>
</div>
<div class="col-md-3" id="navy2">
<div class="site-wrapper">
<div class="site-wrapper-inner">
<a href="https://www.youtube.com/user/PacificAmericanMedia" target="_blank"><i class="fa fa-youtube fa-3x" aria-hidden="true"></i></a>
<p>Learn more about us through our videos!</p>
</div>
</div>
</div>
</div>
</div>
</div>
</html>对于第二张图片
.site-wrapper {
display: table;
width: 100%;
height: auto; /* For at least Firefox */
min-height: 100%;
}
.site-wrapper-inner {
display: table-cell;
vertical-align: middle;
}
#academics {
background-image: url(photos/Copy%20of%20IMG_0351.png);
background-position: center center;
background-size: cover;
height: 40vh;
}
.academics p {
color: #fff;
text-align: justify;
padding: 30px;
}
.academic-nav {
background-color: #fff;
height: 400px;
display: none;
}
ul > li > a {
color: #000;
}
ul {
text-align: left
}
.col-md-10 {
overflow: scroll;
height: 60vh;
}
.col-md-6 {
width: 100%;
}
#kindergarten,
#socialstudies {
background-color: #4285f4;
}
#elementary,
#art {
background-color: #0f9d58;
}
#english,
#pe {
background-color: #f4b400;
}
#math-science {
background-color: #db4437;
}
iframe {
height: 200px;
border: 5px solid white;
margin: 40px;
}
#academic-des {
position: relative;
overflow-y: scroll;
}
@media (min-width: 768px) {
.academic-nav {
position: absolute;
display: block;
background-color: #fff;
height: 60vh;
z-index: 10;
}
.col-md-10 {
float: right;
}
}<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Pacific American School | 亞太美國學校</title>
<!-- Bootstrap -->
<link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<!-- My CSS -->
<link href="style.css" rel="stylesheet">
<!-- Favicon -->
<link rel="shortcut icon" type="image/ico" href="photos/Favicon PAS.png" />
<!-- GOOGLE FONTS -->
<link href="https://fonts.googleapis.com/css?family=Cormorant+Garamond" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Oswald:200,300,400,500,600,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Muli:200,400,700,800,900" rel="stylesheet">
<!-- FONT AWESOME -->
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="site-wrapper">
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="#">Pacific American School</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">
<li><a href="#">About</a></li>
<li class="active"><a href="#">Academics</a></li>
<li><a href="#">Exclusive</a></li>
<li><a href="#">Student Life</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Admissions</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="site-wrapper" id="academics">
<div class="site-wrapper black-cover">
<div class="site-wrapper-inner">
<h1>Academics</h1>
</div>
</div>
</div> <!-- academics -->
<div class="site-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-md-2 academic-nav">
<ul class="nav nav-pills nav-stacked">
<li><a href="#kindergarten">Kindergarten</a></li>
<li><a href="#elementary">Elementary</a></li>
<li><a href="#english">English</a></li>
<li><a href="#math-science">Math & Science</a></li>
<li><a href="#socialstudies">Social Studies</a></li>
<li><a href="#art">Art & Design</a></li>
<li><a href="#pe">Physical Education</a></li>
</ul>
</div> <!-- col-md-2 -->
<div class="col-md-10" id="academic-des" data-spy="scroll" data-target="academic-nav">
<div class="site-wrapper academics" id="kindergarten">
<div class="site-wrapper-inner">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<h2>Kindergarten (3yrs - 5yrs)</h2>
<p>...</p>
</div>
<div class="col-md-6">
<div class="video">
<iframe src="https://www.youtube.com/embed/PVIcKs_U0fU" frameborder="0" allowfullscreen id="videos"></iframe>
</div>
</div>
</div>
</div> <!-- container-fluid -->
</div> <!-- site-wrapper-inner -->
</div> <!-- kindergarten -->
<div class="site-wrapper academics" id="elementary">
<div class="site-wrapper-inner">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<h2>Elementary Department (Grade 1-5)</h2>
<p>...</p>
</div>
<div class="col-md-6">
<div class="video">
<iframe src="https://www.youtube.com/embed/PVIcKs_U0fU" frameborder="0" allowfullscreen id="videos"></iframe>
</div>
</div>
</div>
</div> <!-- container-fluid -->
</div> <!-- site-wrapper-inner -->
</div> <!-- elementary -->
<div class="site-wrapper academics" id="english">
<div class="site-wrapper-inner">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<h2>English Department</h2>
<p>...</p>
</div>
<div class="col-md-6">
<div class="video">
<iframe src="https://www.youtube.com/embed/PVIcKs_U0fU" frameborder="0" allowfullscreen id="videos"></iframe>
</div>
</div>
</div>
</div> <!-- container-fluid -->
</div> <!-- site-wrapper-inner -->
</div> <!-- english -->
<div class="site-wrapper academics" id="math-science">
<div class="site-wrapper-inner">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<h2>Math & Science Department</h2>
<p>...</p>
</div>
<div class="col-md-6">
<div class="video">
<iframe src="https://www.youtube.com/embed/PVIcKs_U0fU" frameborder="0" allowfullscreen id="videos"></iframe>
</div>
</div>
</div>
</div> <!-- container-fluid -->
</div> <!-- site-wrapper-inner -->
</div> <!-- math & science -->
<div class="site-wrapper academics" id="socialstudies">
<div class="site-wrapper-inner">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<h2>Social Studies</h2>
<p>...</p>
</div>
<div class="col-md-6">
<div class="video">
<iframe src="https://www.youtube.com/embed/PVIcKs_U0fU" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</div> <!-- container-fluid -->
</div> <!-- site-wrapper-inner -->
</div> <!-- socialstudies -->
<div class="site-wrapper academics" id="art">
<div class="site-wrapper-inner">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<h2>Art & Design</h2>
<p>...</p>
</div>
<div class="col-md-6">
<div class="video">
<iframe src="https://www.youtube.com/embed/PVIcKs_U0fU" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</div> <!-- container-fluid -->
</div> <!-- site-wrapper-inner -->
</div> <!-- art -->
<div class="site-wrapper academics" id="pe">
<div class="site-wrapper-inner">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<h2>Physical Education</h2>
<p>...</p>
</div>
<div class="col-md-6">
<div class="video">
<iframe src="https://www.youtube.com/embed/PVIcKs_U0fU" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</div> <!-- container-fluid -->
</div> <!-- site-wrapper-inner -->
</div> <!-- pe -->
</div> <!-- col-md-10 -->
</div> <!-- row -->
</div> <!-- container-fluid -->
</div> <!-- site-wrapper -->
</div> <!-- mastfoot -->
</div> <!-- site-wrapper -->
</body>
</html>最佳答案
我认为在第一张图片中，侧面的填充来自链接(“a”)或 html 中的段落(“p”)的 native 填充。
我需要秒的来源来回答你的问题。
关于html - 额外边距/填充，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43508459/
25
4
0
padding:initial 比 padding:0 有什么优势吗？示例: textarea { padding: 0; } Hello, world! 最佳答案 它们的意思是一
我尝试通过按钮填充 JList，然后在先前填充的 Jlist 上使用 DoubleClick 填充 JTextField。 代码: private void extractUsedVariables
我正在尝试做 var width = ($(this).width() + $(this).css('padding-left') + $(this).css('padding-right' ))；
我在导航中添加了悬停效果，遗憾的是悬停也影响了上面的文字。如何在不影响文本位置的情况下向导航添加悬停？ 可悲的是，我找不到解决这个问题的方法。 HTML 模板:http://projects.help
我是 F# 初学者，下面代码中的 %-5s 和 %5s 有什么作用？我认为它提供了空间填充，但我不确定它是如何填充的？ printfn "%-5s %5s" "a" "b" 当我尝试 prin
我需要选择带狗的用户(带 type 等于“狗”的宠物) var User = Waterline.Collection.extend({ identity: 'user', attribute
我一直在尝试让 Excel 在一组列上应用公式，然后将模式扩展到整个行集。 这导致了以下代码: For i = 0 To avgsheetNames.Count - 1 If Contains(CSt
随着 Flutter 2.0 的发布，FlatButton已被替换为 TextButton . 因此，填充属性不再直接可用，而是作为 ButtonStyle属性(property)。 我的问题是，我该
这似乎是一个简单的问题，但我已经尝试了一个小时，似乎无法弄清楚。 我要做的就是用 Canvas 填充 MainWindow。我找不到任何允许这样做的属性，我能想到的唯一方法是设置 Canvas.Wid
这是a website具有移动 View 。 网站宽度为 640 像素，但 iPhone 以 678 像素渲染文档。在 Android 中看起来很棒。 我添加了视口(viewport)元: 主体 C
我正在使用 GridBagLayout到(当前)显示两行。我知道这种布局对于这项任务来说太过分了，但我正在努力学习如何使用它。问题是我已将两个面板添加到两个单独的行中，并且内容周围存在巨大差距(请参见
我有以下代码已传递给我并创建多边形: var map; function initialize() { var myLatlng = new google.maps.LatLng(-36.4
我在 Jpanel 中有一些项目，然后将其推到顶部并用作基本搜索引擎的工具栏。我遇到一个问题，因为没有足够的空间，所以我的最后一个组合框没有显示。但是，左侧有很多空白空间，我需要移动所有内容来填充 J
我创建了带有阈值的二进制图像。如下图所示如何改变白色形状的颜色以使其可索引？ 到目前为止，这是我的代码: void threshold() { cv::Mat src_8uc3_img = c
我有一个 JTable，我想知道是否有更好的方法来填充它，这是我的代码: //Metodo para llenar un jtable con datos de la base public stat
我想要做的是裁剪一个卷以删除所有不相关的数据。例如，假设我有一个 100x100x100 的体积，其中填充了 0，但其中的 50x50x50 体积则填充了 1。如何从原始体积中获得裁剪后的 50x50
因此，我正在创建一种对一组数字进行洗牌的方法，其想法是创建这些数字的总体。因此，我创建了一个循环，对数字进行洗牌，然后将其添加到数组列表中，但是经过一些调试语句后，我发现它确实对数字进行洗牌，但只将最
假设我有这两个类: public class A where T : IEntityWithID, new() { private static EntityInfo entityInfo =
我正在尝试添加用户输入的两个大整数作为字符串。当两个输入字符串的长度不同时，我尝试用零填充较短的数字，但它不起作用。因此，如果我输入 456 和 7，它会给出 3，前面有一些随机字符。感谢您的任何建议
这是我将内容打印到表格 View 的代码 override func tableView(_ tableView: UITableView, cellForRowAt indexPath: Index
我是一名优秀的程序员,十分优秀！