右边距的差距不会消失(Bootstrap)

时间:2015-12-14 00:31:47

标签: html css twitter-bootstrap twitter-bootstrap-3

我正在使用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;
    }

3 个答案:

答案 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)

你有一些错误。

  1. 所有.col- *应该在.row中,所以你必须在你的行类中添加一个父div
  2. 在你的社交媒体部分,你有两个div.row,在h3之前直接移除一个部分。
  3. 你有4个带有col-md-2类的div,这将产生8个cols的网格,你需要总共12个,所以将col-md-offset-2添加到第一个。
  4. 同样将其修复为其他col尺寸,不确定您要为较小的设备实现什么。
  5. 最后,如果您愿意,请将标题居中对齐。
  6. 提示:更改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>