Question

我目前正在使用bootstrap框架构建我的第一个网站，并希望在＆＃39; lead＆＃39;之间应用30px的填充。段落和以下博客页面的响应式图像我正在写作。然而，CSS似乎没有将填充或边距应用于＆＃34;引导＆＃34; class p元素。它昨天工作正常，但从那以后我一直在摆弄布局，所以我不确定为什么现在这个规则不会被解雇？

同样，我包裹着继续阅读...＆＃39;在一个“浮动权利”中昨天班级正常工作，然而今天再次使用CSS，它已经默认到列的左侧，所以我不得不应用`text-align：right;在CSS中。造成这些异常的原因是什么？我对Bootstrap和网站建设很新，并意识到我的代码可能是杂乱无章或缺少关键信息，所以任何帮助都将非常感激。谢谢，乔恩

http://www.jonhowlett.uk/blog.html

HTML： -

 <div id="blog">    
 <div class="container">
    <div class="row">
        <div class="col-md-8">
            <!--heading-->
            <h1>Latest Posts</h1>
            <!--list of posts-->
            <article><!--use to semantically markup each blog post, forum post, newspaper article etc., -->
            <h2><a href="#">Blog Post 1</a></h2>
                <div class="row">
                    <div class="group 1 col-sm-6 col-md-6"><!--grouped together category and tags into one column-->
                        <span class="glyphicon glyphicon-folder-open"></span> <a href="#">Open Folder</a>
                            <span class="glyphicon glyphicon-bookmark"></span> <a href="#">Bookmark 1</a>,<a href="#">Bookmark 2</a>, <a href="#">Bookmark 3</a>
                    </div>
                    <div class="group2 col-sm-6 col-md-6"><!--grouped together total comments and posted date--><!--GROUP2 is required to align both the total comments and published date to right in case of tablets and desktops-->

                        <span class="glyphicon glyphicon-pencil"></span> <a href="singlepost.html#comments">20 Comments</a>                             
                            <span class="glyphicon glyphicon-time"></span> Friday 2nd October 2015                       
                    </div>

                    <a href="singlepost1.html"><img src="images/blogpost1.jpg" class="img-responsive"></a>

                    <br />

                    <p class="lead"><!--LEAD class increases font size and makes it bold-->Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p>

                    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
                    <span class="glyphicons glyphicons-circle-arrow-right"></span>
                    <p class="text-right"><!--TEXT-RIGHT class to align right...-->
                        <a href="singlepost1.html" class="text-right">
                            continue reading<span class="span_space"><span class="glyphicon glyphicon-chevron-right"></span></span>
                        </a>
                    </p>
                </div>
            </article>

            <hr class="hr"></hr>
            <article><!--use to semantically markup each blog post, forum post, newspaper article etc., -->
            <h2><a href="#">Blog Post 2</a></h2>
                <div class="row">
                    <div class="group 1 col-sm-6 col-md-6"><!--grouped together category and tags into one column-->
                        <span class="glyphicon glyphicon-folder-open"></span> <a href="#">Open Folder</a>
                            <span class="glyphicon glyphicon-bookmark"></span> <a href="#">Bookmark 1</a>,<a href="#">Bookmark 2</a>, <a href="#">Bookmark 3</a>
                    </div>
                    <div class="group2 col-sm-6 col-md-6"><!--grouped together total comments and posted date--><!--GROUP2 is required to align both the total comments and published date to right in case of tablets and desktops-->

                        <span class="glyphicon glyphicon-pencil"></span> <a href="singlepost.html#comments">20 Comments</a>                             
                            <span class="glyphicon glyphicon-time"></span> Friday 2nd October 2015                       
                    </div>

                    <a href="singlepost2.html"><img src="images/blogpost2.jpg" class="img-responsive"></a>

                    <br />

                    <p class="lead"><!--LEAD class increases font size and makes it bold-->Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p>

                    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
                    <span class="glyphicons glyphicons-circle-arrow-right"></span>
                    <p class="text-right"><!--TEXT-RIGHT class to align right...-->
                        <a href="singlepost2.html" class="text-right">
                            continue reading<span class="span_space"><span class="glyphicon glyphicon-chevron-right"></span></span>
                        </a>
                    </p>
                </div>
            </article>
            <hr class="hr"></hr>
            <article><!--use to semantically markup each blog post, forum post, newspaper article etc., -->
            <h2><a href="#">Blog Post 3</a></h2>
                <div class="row">
                    <div class="group 1 col-sm-6 col-md-6"><!--grouped together category and tags into one column-->
                        <span class="glyphicon glyphicon-folder-open"></span> <a href="#">Open Folder</a>
                            <span class="glyphicon glyphicon-bookmark"></span> <a href="#">Bookmark 1</a>,<a href="#">Bookmark 2</a>, <a href="#">Bookmark 3</a>
                    </div>
                    <div class="group2 col-sm-6 col-md-6"><!--grouped together total comments and posted date--><!--GROUP2 is required to align both the total comments and published date to right in case of tablets and desktops-->

                        <span class="glyphicon glyphicon-pencil"></span> <a href="singlepost.html#comments">20 Comments</a>                             
                            <span class="glyphicon glyphicon-time"></span> Friday 2nd October 2015                       
                    </div>

                    <a href="singlepost3.html"><img src="images/blogpost3.jpg" class="img-responsive"></a>

                    <br />

                    <p class="lead"><!--LEAD class increases font size and makes it bold-->Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p>

                    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
                    <span class="glyphicons glyphicons-circle-arrow-right"></span>
                    <p class="text-right"><!--TEXT-RIGHT class to align right...-->
                        <a href="singlepost3.html" class="text-right">
                            continue reading<span class="span_space"><span class="glyphicon glyphicon-chevron-right"></span></span>
                        </a>
                    </p>
                </div>
            </article>              
            <ul class="pager"> 
                <li class="previous">
                    <a href="#">Older</a>
                </li> 
                <li class="next">
                    <a href="#">Newer</a>
                </li> 
            </ul>
        </div>
        <div class="col-md-4">
        <!-- Other widgets -->
        </div>
    </div>
</div>
</div>

CSS： -

#blog_jumbotron .jumbotron {
background-image: url(images/blogpost_jumbotron3.jpg);
}

#blog h1 {
font-family:'Roboto', arial;
  font-size: 50px;
}

#blog h2 {
  font-family: 'Questrial', arial;
  font-size: 30px;
     padding-bottom: 25px;
  width: 100%;
}

#blog h2 a {
  color: #D35F45;
}

#blog img {
  padding-left: 20px;
  padding-right: 20px;
}

#blog p {
  font-family: 'Questrial', arial;
  margin-left: 15px;
  margin-right: 15px;
  text-align: left;
  font-size: 16px;
  line-height: 1.5;
}

#blog .lead {
  padding-top: 15px;
  padding-bottom: 15px;
  font-size: 20px;
  color: #303046;
  line-height: 1.7;
}

#blog .img-responsive {
  padding-top: 25px;
}

#blog .text-right {
  color: #D35F45;
  font-size: 16px;
  text-align: right;
}

#blog .pager a {
  background-color: white;
  border-radius: 0;
  border: 2px solid #7C7C7C;
  color: #7C7C7C;
  font-family: 'Questrial', arial;
  text-transform: uppercase;
  letter-spacing: 1px;
}

#blog .pager a:hover {
  background-color: #D35F45;
  border: 2px solid #D35F45;
  color: white;
  transition-duration: 0.3s;
}


#blog a img {
  float: left;
}

Answer 1

你可以尝试这个：

#blog_jumbotron .jumbotron {
  background-image: url(images/blogpost_jumbotron3.jpg);
}

#blog h1 {
  font-family:'Roboto', arial;
  font-size: 50px;
}

#blog h2 {
  font-family: 'Questrial', arial;
  font-size: 30px;
  padding-bottom: 25px;
  width: 100%;
}

#blog h2 a {
  color: #D35F45;
}

#blog img {
  padding-left: 20px;
  padding-right: 20px;
}

#blog p {
  font-family: 'Questrial', arial;
  margin-left: 15px;
  margin-right: 15px;
  text-align: left;
  font-size: 16px;
  line-height: 1.5;
}

#blog .lead {
  padding-top: 15px;
  padding-bottom: 15px;
  font-size: 20px;
  color: #303046;
  line-height: 1.7;
}

#blog .img-responsive {
  padding-top: 25px;
}

#blog .text-right {
  color: #D35F45;
  font-size: 16px;
  text-align: right;
}

#blog .pager a {
  background-color: white;
  border-radius: 0;
  border: 2px solid #7C7C7C;
  color: #7C7C7C;
  font-family: 'Questrial', arial;
  text-transform: uppercase;
  letter-spacing: 1px;
}

#blog .pager a:hover {
  background-color: #D35F45;
  border: 2px solid #D35F45;
  color: white;
  transition-duration: 0.3s;
}


#blog a img {
  float: left;
}
.next
{
    float:right;
 margin-top:-19px;
}

Demo Fiddle

Answer 2

将此添加到您的lead课程的css： -

position:relative;
top:50px;
padding-bottom:50px;

前两行用于移动段落，第三行用于平移文档的其余部分，即如果要增加距离顶部的距离，则还必须更新{{1}中的相同数量保持与其他下方内容的距离。

Answer 3

你不能在'lead'段落和响应式图像之间应用30px的填充，因为img处于浮动模式，前导段落和图像变成一个块。 float元素浮动在段落周围，因此在您的情况下，填充围绕图像。

无法将填充或边距应用于＆＃34;导致＆＃34; class <p>元素

3 个答案: