无法对 "lead" class <p> 元素应用填充或边距

Question

我目前正在使用 bootstrap 框架构建我的第一个网站，并希望在 'lead' 段落和我正在编写的以下博客页面的响应图像之间应用 30px 的填充.但是 CSS 似乎没有对 "lead" class p 元素应用填充或边距。昨天它工作正常，但从那以后我一直在摆弄布局，所以我不确定为什么现在不触发此规则？

同样，昨天我将 'continue reading...' 包装在 'float-right' class 中，它工作正常，但是今天又因为摆弄 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 class 的 css:-

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

前两行用于移动段落，第三行用于平均移动文档的其余部分，即如果您想增加距顶部的距离，那么您还必须在 padding-bottom 与下面的其余内容保持距离。

Answer 3

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

无法对 "lead" class <p> 元素应用填充或边距

Unable to apply padding or margin to "lead" class <p> element

html

css

margin

padding

twitter-bootstrap