我正在使用Bootstrap并且在正确的浏览器边距和网格之间存在差距。网格等于12与偏移量,但它仍然没有到达另一侧。我不想妥协.col大小并使其成为xs。这似乎是迄今为止唯一有效的解决方案。任何人都可以帮助解决这个问题吗?
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">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<link href="http://fonts.googleapis.com/css?family=Cookie:400" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,300' rel='stylesheet' type='text/css'>
<title>Junebug Mixology</title>
</head>
<body>
<header class="bgimage">
<img src='../bootstrap/images/junebug.png' alt="Junebug Mixology" class="img-responsive center-block" />
</header>
<div class="container-fluid">
<section class="hello col-md-5">
<h1>hello!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab libero,
cupiditate veniam officiis itaque in porro iure fugit iusto reprehenderit
commodi earum cum blanditiis quos error similique quod, facere! Hic.</p>
</section>
<section class="social-media col-md-4 col-md-offset-3">
<div class="row">
<h3>To Stay Connected</h3>
<div class="row">
<div class="col-lg-2 col-md-2 col-sm-1 col-xs-1">
<a href="https://www.instagram.com/neon.honey/" target="_blank"><img class="media-object" src="../bootstrap/images/instagram.png" alt="Instagram"></a>
</div>
<div class="col-lg-2 col-md-2 col-sm-1 col-xs-1">
<a href="https://twitter.com/deephoney/" target="_blank"><img class="media-object" src="../bootstrap/images/twitter.png" alt="Twitter"></a>
</div>
<div class="col-lg-2 col-md-2 col-sm-1 col-xs-1">
<a href="https://www.pinterest.com/electrodextrose/" target="_blank"><img class="media-object" src="../bootstrap/images/pinterest.png" alt="Pinterest" /></a>
</div>
<div class="col-lg-2 col-md-2 col-sm-1 col-xs-1">
<a href="mailto:" target="_top"><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span></a>
</div>
</div>
</div>
</section>
</div>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
</body>
CSS:
body {
background-color: rgb(31, 37, 45);
color: rgb(239, 232, 239);
font-family: 'Open Sans', sans-serif;
font-weight: 300;
padding-top: 50px;
}
h1 {
color: rgb(244, 195, 197);
font-family: 'Cookie', sans-serif;
font-weight: 400;
text-shadow: 2px 2px 1px rgba(192,192,192,0.1);
text-transform: lowercase;
font-size: 70px;
margin-bottom: -5px;
text-align: center;
}
h3 {
color: rgb(244, 195, 197);
text-transform: uppercase;
}
.bgimage {
background-image: url('../images/bgimage.png');
background-position: center center;
background-size: cover;
height: 450px;
background-color: rgb(34, 39, 42);
padding-top: 25px;
}
.row {
margin: 7px;
}
h4 {
margin-top: 1px;
text-align: left;
font-size: 15px;
}
.glyphicon {
color: rgb(135, 112, 94);
font-size: 25px;
}
section.hello {
text-align: center;
}
答案 0 :(得分:0)
你可以添加两个“col-md-6”。因此,“你好”部分和“社交媒体”将与网络两侧保持相同的距离。
另外,我建议你:如果你是初学者...当你遇到问题时,最好将问题设置为“元素”。这样,你就会对空间,边距,填充物和各种东西有更多的“想法”。
答案 1 :(得分:0)
以下是两个如何执行此操作的示例。请记住,如果您要访问nest列,则应保持行/列的相同关系。在您的示例中,您的AsymmetricKeyAlgorithmProvider asymmetricKeyAlgorithmProvider = AsymmetricKeyAlgorithmProvider.OpenAlgorithm(AsymmetricAlgorithmNames.get_RsaPkcs1());
CryptographicKey cryptographicKey = asymmetricKeyAlgorithmProvider.CreateKeyPair(1024u);
IBuffer buffer = cryptographicKey.Export(3);
IBuffer buffer2 = cryptographicKey.ExportPublicKey(3);
byte[] inArray;
CryptographicBuffer.CopyToByteArray(buffer, ref inArray);
byte[] inArray2;
CryptographicBuffer.CopyToByteArray(buffer2, ref inArray2);
CommonMethods.PrivateKey = Convert.ToBase64String(inArray);
CommonMethods.PublicKey = Convert.ToBase64String(inArray2);
结构不包含hello section
,社交row
包含media section
。最终,您的两个基本列应位于rows
内,而您的内部row
应位于columns
内。
而且你希望社交图标与hello部分一样靠近窗口的边缘,你可以将它们对准992px以上的右边,然后将它们置于992px以下。
示例1:将列用于社交图标。
row
body {
background-color: rgb(31, 37, 45);
color: rgb(239, 232, 239);
font-family: 'Open Sans', sans-serif;
font-weight: 300;
padding-top: 50px;
}
h1 {
color: rgb(244, 195, 197);
font-family: 'Cookie', sans-serif;
font-weight: 400;
text-shadow: 2px 2px 1px rgba(192, 192, 192, 0.1);
text-transform: lowercase;
font-size: 70px;
margin-bottom: -5px;
text-align: center;
}
h3 {
color: rgb(244, 195, 197);
text-transform: uppercase;
}
.bgimage {
background-image: url('http://placehold.it/1850x750/000/000');
background-position: center center;
background-size: cover;
height: 450px;
background-color: rgb(34, 39, 42);
padding-top: 25px;
}
h4 {
margin-top: 1px;
text-align: left;
font-size: 15px;
}
.glyphicon {
color: rgb(135, 112, 94);
font-size: 25px;
}
.social-media {
text-align: right;
}
@media (max-width: 991px) {
.social-media {
text-align: center;
}
}
示例2:没有列的位置图标。
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<header class="bgimage">
<img src='http://placehold.it/400x400/f00' alt="Junebug Mixology" class="img-responsive center-block img-circle" />
</header>
<div class="container-fluid">
<div class="row">
<section class="hello col-md-5 text-center">
<h1>hello!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab libero, cupiditate veniam officiis itaque in porro iure fugit iusto reprehenderit commodi earum cum blanditiis quos error similique quod, facere! Hic.</p>
</section>
<section class="social-media col-md-4 col-md-offset-3">
<h3>To Stay Connected</h3>
<div class="row">
<div class="col-md-2 col-md-offset-4 col-xs-2 col-xs-offset-2">
<a href="ht tps://www.instagram.com/neon.honey/" target="_blank">
<img src="http://placehold.it/25x25/ff0" alt="Instagram">
</a>
</div>
<div class="col-md-2 col-xs-2">
<a href="https://twitter.com/deephoney/" target="_blank">
<img src="http://placehold.it/25x25/ff0" alt="Twitter">
</a>
</div>
<div class="col-md-2 col-xs-2">
<a href="https://www.pinterest.com/electrodextrose/" target="_blank">
<img src="http://placehold.it/25x25/ff0" alt="Pinterest" />
</a>
</div>
<div class="col-md-2 col-xs-2">
<a href="mailto:" target="_top"><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span></a>
</div>
</div>
</section>
</div>
</div>
body {
background-color: rgb(31, 37, 45);
color: rgb(239, 232, 239);
font-family: 'Open Sans', sans-serif;
font-weight: 300;
padding-top: 50px;
}
h1 {
color: rgb(244, 195, 197);
font-family: 'Cookie', sans-serif;
font-weight: 400;
text-shadow: 2px 2px 1px rgba(192, 192, 192, 0.1);
text-transform: lowercase;
font-size: 70px;
margin-bottom: -5px;
text-align: center;
}
h3 {
color: rgb(244, 195, 197);
text-transform: uppercase;
}
.bgimage {
background-image: url('http://placehold.it/1850x750/000/000');
background-position: center center;
background-size: cover;
height: 450px;
background-color: rgb(34, 39, 42);
padding-top: 25px;
}
h4 {
margin-top: 1px;
text-align: left;
font-size: 15px;
}
.glyphicon {
color: rgb(135, 112, 94);
font-size: 25px;
}
section.hello {
text-align: center;
}
.social-media {
text-align: right;
display: inline-block;
}
.social-media a {
display: inline-block;
text-align: center;
margin-left: 25px;
}
@media (max-width: 991px) {
.social-media {
display: block;
text-align: center;
}
.social-media a {
float: none;
margin: 0 15px;
}
}
答案 2 :(得分:-1)
你有一些错误。
提示:更改section.social-media的背景颜色,以帮助您查看网格的大小。
这是我创建的小提琴的链接:https://jsfiddle.net/9r30nhby/
<header class="bgimage">
<img src='../bootstrap/images/junebug.png' alt="Junebug Mixology" class="img-responsive center-block" />
</header>
<div class="container-fluid">
<div class="row">
<section class="hello col-md-5">
<h1>hello!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab libero, cupiditate veniam officiis itaque in porro iure fugit iusto reprehenderit commodi earum cum blanditiis quos error similique quod, facere! Hic.</p>
</section>
<section class="social-media col-md-4 col-md-offset-3 text-center">
<h3>To Stay Connected</h3>
<div class="row">
<div class="col-lg-offset-2 col-md-offset-2 col-lg-2 col-md-2 col-sm-1 col-xs-1">
<a href="https://www.instagram.com/neon.honey/" target="_blank"><img class="media-object" src="../bootstrap/images/instagram.png" alt="Instagram"></a>
</div>
<div class="col-lg-2 col-md-2 col-sm-1 col-xs-1">
<a href="https://twitter.com/deephoney/" target="_blank"><img class="media-object" src="../bootstrap/images/twitter.png" alt="Twitter"></a>
</div>
<div class="col-lg-2 col-md-2 col-sm-1 col-xs-1">
<a href="https://www.pinterest.com/electrodextrose/" target="_blank"><img class="media-object" src="../bootstrap/images/pinterest.png" alt="Pinterest" /></a>
</div>
<div class="col-lg-2 col-md-2 col-sm-1 col-xs-1">
<a href="mailto:" target="_top"><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span></a>
</div>
</div>
</section>