尝试为网站创建 CSS 样式（引导程序）答案

【问题标题】：Trying to create a css style for a website (Bootstrap)尝试为网站创建 CSS 样式（引导程序）
【发布时间】：2015-07-15 20:59:46
【问题描述】：

所以我正在尝试将一种样式应用于我网页中的某个部分，但它似乎不起作用。如果我将样式添加到 head 部分，它将起作用，所以我认为我没有正确引用它或者我没有正确划分页面。以下是我的代码：

    <!--gallery-->
<div id="gall">
<div class="container">

    <section>
    <div id="gallery">
    <br>
    <div class="page-header">
    <br>
    <h2> Gallery <small>Conservation Joinery's gallery</small><h2>
    </div>



    <ul class="row page2" id="page2">
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="IMG1.jpg">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="IMG2.jpg">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="images/photodune-460760-colors-xs.jpg">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="images/photodune-461673-retro-party-xs.jpg">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="images/photodune-514834-touchscreen-technology-xs.jpg">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="images/photodune-916206-legal-xs.jpg">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="images/photodune-1062948-nature-xs.jpg">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="images/photodune-1471528-insant-camera-kid-xs.jpg">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="images/photodune-2255072-relaxed-man-xs.jpg">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="images/photodune-2360379-colors-xs.jpg">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="images/photodune-2360571-jump-xs.jpg">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="images/photodune-2361384-culture-for-business-xs.jpg">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="images/photodune-2441670-spaghetti-with-tuna-fish-and-parsley-s.jpg">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="images/photodune-2943363-budget-xs.jpg">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="images/photodune-3444921-street-art-xs.jpg">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="images/photodune-3552322-insurance-xs.jpg">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="images/photodune-3807845-food-s.jpg">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="images/photodune-3835655-down-office-worker-xs.jpg">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="images/photodune-4619216-ui-control-knob-regulators-xs.jpg">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="images/photodune-5771958-health-xs.jpg">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="images/photodune-268693-businesswoman-using-laptop-outdoors-xs.jpg">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="images/photodune-352207-search-of-code-s.jpg">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="images/photodune-247190-secret-email-xs.jpg">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="images/photodune-682990-online-search-xs.jpg">
        </li>
      </ul> 


 </div> <!--gallery-->   




<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">         
      <div class="modal-body">                
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->




    </section>

</div><!--end of container -->
</div>

这是我的样式表。

.gall{
      ul {         
          padding:0 0 0 0;
          margin:0 0 0 0;
      }
      ul li {     
          list-style:none;
          margin-bottom:25px;           
      }
      ul li img {
          cursor: pointer;
      }
      .modal-body {
          padding:5px !important;
      }
      .modal-content {
          border-radius:0;
      }
      .modal-dialog img {
          text-align:center;
          margin:0 auto;
      }
    .controls{          
        width:50px;
        display:block;
        font-size:11px;
        padding-top:8px;
        font-weight:bold;          
    }
    .next {
        float:right;
        text-align:right;
    }
      /*override modal for demo only*/
      .modal-dialog {
          max-width:500px;
          padding-top: 90px;
      }
      @media screen and (min-width: 768px){
          .modal-dialog {
              width:500px;
              padding-top: 90px;
          }          
      }
      @media screen and (max-width:1500px){
          #ads {
              display:none;
          }
      }

  }

【问题讨论】：

您是否将自定义样式表链接到页面（页面），如果有，在哪里？ stackoverflow.com/questions/8084964/…
是的，它在头部链接

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

【解决方案1】：

您的所有 CSS 规则都包含在 .gall {} 中，这基本上使它们无效。参考下例中调整后的规则。

#gall ul {

  padding: 0 0 0 0;

  margin: 0 0 0 0;

}

#gall ul li {

  list-style: none;

  margin-bottom: 25px;

}

#gall ul li img {

  cursor: pointer;

}

.modal-body {

  padding: 5px !important;

}

.modal-content {

  border-radius: 0;

}

.modal-dialog img {

  text-align: center;

  margin: 0 auto;

}

.controls {

  width: 50px;

  display: block;

  font-size: 11px;

  padding-top: 8px;

  font-weight: bold;

}

.next {

  float: right;

  text-align: right;

}

/*override modal for demo only*/

.modal-dialog {

  max-width: 500px;

  padding-top: 90px;

}

@media screen and (min-width: 768px) {

  .modal-dialog {

    width: 500px;

    padding-top: 90px;

  }

}

@media screen and (max-width: 1500px) {

  #ads {

    display: none;

  }

}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<!--gallery-->
<div id="gall">
  <div class="container">
    <section>
      <div id="gallery">
        <br>
        <div class="page-header">
          <br>
          <h2> Gallery <small>Conservation Joinery's gallery</small><h2>
    </div>



    <ul class="row page2" id="page2">
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="http://placehold.it/150x150/f00/fff">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="http://placehold.it/150x150/f00/fff">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="http://placehold.it/150x150/f00/fff">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="http://placehold.it/150x150/f00/fff">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="http://placehold.it/150x150/f00/fff">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="http://placehold.it/150x150/f00/fff">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="http://placehold.it/150x150/f00/fff">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="http://placehold.it/150x150/f00/fff">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="http://placehold.it/150x150/f00/fff">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="http://placehold.it/150x150/f00/fff">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="http://placehold.it/150x150/f00/fff">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="http://placehold.it/150x150/f00/fff">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="http://placehold.it/150x150/f00/fff">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="http://placehold.it/150x150/f00/fff">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="http://placehold.it/150x150/f00/fff">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="http://placehold.it/150x150/f00/fff">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="http://placehold.it/150x150/f00/fff">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="http://placehold.it/150x150/f00/fff">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="http://placehold.it/150x150/f00/fff">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="http://placehold.it/150x150/f00/fff">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="http://placehold.it/150x150/f00/fff">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="http://placehold.it/150x150/f00/fff">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="http://placehold.it/150x150/f00/fff">
        </li>
        <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4">
            <img class="img-responsive" src="http://placehold.it/150x150/f00/fff">
        </li>
      </ul> 


 </div> <!--gallery-->   




<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">         
      <div class="modal-body">                
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->




    </section>

</div><!--end of container -->
</div>

【讨论】：

【解决方案2】：

我注意到的第一个问题：

<div id="gall"> 应该是 <div class="gall">，因为您在 CSS 中将其定义为 .gall 而不是 #gall。

同样，如果您在引导后将该样式表加载到您的头中，它将覆盖同名元素而不是引导库中的元素。

【讨论】：

【解决方案3】：

我可以看到，对于您拥有的第一个 div，您给了它 id=gall 但您在样式表中使用句点（类选择器）选择了它你应该在样式表中使用这个 #gall 而不是 .gall

【讨论】：

【解决方案4】：

看起来您正在尝试使用 sass/scss 作为 css 而不是 css

你的 CSS 应该是这样的。

#gall ul {         
      padding:0 0 0 0;
      margin:0 0 0 0;
  }
#gall ul li {     
      list-style:none;
      margin-bottom:25px;           
 }
 #gall ul li img {
      cursor: pointer;
  }
  #gall .modal-body {
      padding:5px !important;
  }
  #gall .modal-content {
      border-radius:0;
  }
  #gall .modal-dialog img {
      text-align:center;
      margin:0 auto;
  }
#gall .controls{          
    width:50px;
    display:block;
    font-size:11px;
    padding-top:8px;
    font-weight:bold;          
}
#gall .next {
    float:right;
    text-align:right;
}
  /*override modal for demo only*/
  #gall .modal-dialog {
      max-width:500px;
      padding-top: 90px;
  }
  @media screen and (min-width: 768px){
      #gall .modal-dialog {
          width:500px;
          padding-top: 90px;
      }          
  }
  @media screen and (max-width:1500px){
      #ads {
          display:none;
      }
  }

这是有效的 css，而您放置的上述样式表看起来像需要编译为 css 的 scss/less。

【讨论】：

你是个传奇，非常感谢你。我无法将其标记为正确，因为我只有 13 个代表点。当我有 15 岁时，我会把它当作正确的。再次感谢。 :)

【解决方案5】：

您的样式表使用嵌套。您在“.gall”中有“ul”、“ul li”、“ul li img”定义（应该是“#gall”作为 id 引用，正如其他人所指出的那样）。

CSS 中的嵌套只能通过 Sass 等预处理器来实现。当然，也许您已经在使用预处理器，因为即使将选择器分离为标准 CSS，我也无法让您的样式正常工作。但是如果你不使用预处理器，你应该使用more complicated selectors来表示父子关系，而不是嵌套。

【讨论】：