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

标签 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;
    }

最佳答案

这里有两个例子可以说明如何做到这一点。请记住，如果你要去nest列他们应该保持相同的行/列关系。在您的示例中，您的hello section结构没有row，社交media section有两个row。最终，您的两个基本列应该在 row 内，而您的内部 columns 应该在 row 内。

如果您希望社交图标与问候部分一样靠近窗口边缘，您可以将它们在 992 像素以上的右侧对齐，然后将它们居中 @ 992 像素以下。

示例 1:为社交图标使用列。

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;
  }
}
<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>

示例 2:放置没有列的图标。

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;
  }
}
<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">
      <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>
      <a href="https://www.instagram.com/neon.honey/" target="_blank">
        <img class="media-object" src="http://placehold.it/25x25/ff0" alt="Instagram">
      </a>
      <a href="https://twitter.com/deephoney/" target="_blank">
        <img class="media-object" src="http://placehold.it/25x25/ff0" alt="Twitter">
      </a>
      <a href="https://www.pinterest.com/electrodextrose/" target="_blank">
        <img class="media-object" src="http://placehold.it/25x25/ff0" alt="Pinterest" />
      </a>
      <a href="mailto:" target="_top"><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span></a>
    </section>
  </div>
</div>

关于html - 右边距上的差距不会消失(Bootstrap)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34258133/

上一篇：jquery - 在引导表中使用 jquery 在禁用和启用之间切换

下一篇：css - 仅在小屏幕上更改 div 顺序

相关文章：

javascript - Bootstrap 导航栏在 Chrome 移动版上无法正常工作

javascript - 如何检测两个div是否正在接触/碰撞检测

javascript - 如何显示自某个日期以来的年、月、周和天

css - 正确的标签/输入格式的好处

html - Bootstrap Navbar 在折叠时不隐藏 li 元素

javascript - Bootstrap Modal - 无法从 relatedTarget 收集属性？

html - Apple Store 的输入框如何防止用户点击被视为点击提示短语的搜索框？

javascript - Jquery 计算元素中的字符并给太短的字符填充

html - 高度为 100% 且溢出 : auto in <= IE10 的 Div

javascript - 将 div 放在 svg 中

©2024 IT工具网  联系我们