Fatal编程技术网
  • html/
  • Html 右边距差距获胜'；不要走开（引导）

Html 右边距差距获胜'；不要走开（引导）

html css twitter-bootstrap twitter-bootstrap-3

Html 右边距差距获胜'；不要走开（引导）,html,css,twitter-bootstrap,twitter-bootstrap-3,Html,Css,Twitter Bootstrap,Twitter Bootstrap 3,我使用的是引导，在右边的浏览器边距和网格之间有一个间隙。栅格与偏移量相等于12，但仍无法到达另一侧。我不想牺牲.col的大小而使其成为xs。这似乎是迄今为止唯一有效的解决方案。有人能告诉我关于这个问题的帮助吗 HTML: 您只需添加两个“col-md-6”。因此，“你好”部分和“社交媒体”将与网络两侧保持相同的距离 还有，我建议你：如果你是初学者。。。当您遇到问题时，最好为该问题的“元素”设置一个预兆。这样，你会对空间、边距、填充物等有更多的“想法”。这里有两个例子说明如何做到这一点。请记住，如

我使用的是引导，在右边的浏览器边距和网格之间有一个间隙。栅格与偏移量相等于12，但仍无法到达另一侧。我不想牺牲.col的大小而使其成为xs。这似乎是迄今为止唯一有效的解决方案。有人能告诉我关于这个问题的帮助吗

HTML:

您只需添加两个“col-md-6”。因此，“你好”部分和“社交媒体”将与网络两侧保持相同的距离

还有，我建议你：如果你是初学者。。。当您遇到问题时，最好为该问题的“元素”设置一个预兆。这样，你会对空间、边距、填充物等有更多的“想法”。

这里有两个例子说明如何做到这一点。请记住，如果要访问列，它们应该保持相同的行/列关系。在您的示例中，您的
你好部分
没有
行
，社交
媒体部分
有两行。最终，两个基本列应该位于
行
内，而内部
列
应该位于
行
内

如果你想让社交图标像hello部分一样靠近窗口边缘，你可以在992px上方将其向右对齐，然后在992px下方将其居中

示例1：为社交图标使用列

正文{
背景色：rgb（31,37,45）；
颜色：rgb（2392239）；
字体系列：“开放式Sans”，无衬线；
字体大小：300；
填充顶部：50px；
}
h1{
颜色：rgb（244195197）；
字体系列：“Cookie”，无衬线；
字体大小：400；
文本阴影：2PX2PX1PXRGBA（192,192,192,0.1）；
文本转换：小写；
字体大小：70px；
边缘底部：-5px；
文本对齐：居中；
}
h3{
颜色：rgb（244195197）；
文本转换：大写；
}
.bgimage{
背景图像：url（'http://placehold.it/1850x750/000/000');
背景位置：中心；
背景尺寸：封面；
高度：450px；
背景色：rgb（34,39,42）；
填充顶部：25px；
}
h4{
页边顶部：1px；
文本对齐：左对齐；
字体大小：15px；
}
.字形图标{
颜色：rgb（135、112、94）；
字体大小：25px；
}
.社交媒体{
文本对齐：右对齐；
}
@介质（最大宽度：991px）{
.社交媒体{
文本对齐：居中；
}
}

你好
Lorem ipsum dolor sit amet，奉献精英。自由女神，铜制的威尼斯官方雕塑，以其独特的艺术风格，代表了当时的普通人和布兰迪人，同样的错误，脸！嗯

保持联系
你几乎没有做错什么

  • All.col-*应该在.row内，因此您必须向具有类row的节中添加父div
  • 在您的社交媒体部分中，您有两个div.row，删除h3前面部分中的一个
  • 有4个div和col-md-2类，这将使网格由8个col组成，总共需要12个，所以将col-md-offset-2添加到第一个
  • 类似地，修复其他列大小，但不确定要为较小的设备实现什么
  • 最后，如果你想的话，让标题中心对齐
    • 提示：更改section.social-media的背景色，以帮助您查看网格有多大

    下面是我创建的小提琴链接：

    
你好
Lorem ipsum dolor sit amet，奉献精英。自由女神，铜制的威尼斯官方雕塑，以其独特的艺术风格，代表了当时的普通人和布兰迪人，同样的错误，脸！嗯
    
保持联系

    我创建了一个bootply，我相信它可以显示问题所在。然而，我不确定你想要实现什么。您希望页面看起来像什么？例如，我们可以将您的所有
    元素更改为
    ，这将使用
    .social media
    部分中的所有可用空间，但这将腾出您的锚，我不确定你到底想要什么。这里有一个链接指向它现在的样子：在浏览器窗口的侧面和社交媒体部分之间有一个很大的空间。我希望那个部分更靠近边缘，就像hello部分一样。这更有意义吗？所有
    列-
    -类元素必须包含在
    行
    元素中。我假设这就是问题所在（更不用说您正在重写row类的边距，这将导致自身的问题）。我删除了row类的边距，但我不确定您所说的
    col-
    类元素在
    row
    中的含义。不是吗？或者你是指
    部分
    课程吗？非常感谢你的帮助！这解决了我的问题，为我解决了很多问题。没问题，很高兴我能帮上忙。

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

    

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

    

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