如何在不使用内联样式的情况下覆盖Bootstrap CSS?

时间:2017-11-21 16:38:09

标签: html css twitter-bootstrap css3 css-selectors

我试图覆盖以下p元素的Bootstrap的CSS: https://gyazo.com/6bf5dde284fa53fd4c9cd098ddb1f109

(我想添加一个top-margin: 10px;并删除Bootstrap的底部边距)

到目前为止我唯一可以覆盖它的方法是使用我更喜欢避免的内联样式。除非真的有必要,否则我还是要避免!important

我的css文件按如下方式排序:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="../css/login.css">

我尝试的事情:

<p id="pMargin">
#pMargin {
   margin: 10px 0px 0px 0px !important;
}

<p class="pMargin">
.pMargin {
   margin: 10px 0px 0px 0px !important;
}

#sdntLogForm p {
   margin: 10px 0px 0px 0px !important;
}

body p {
   margin: 10px 0px 0px 0px !important;
}

我的HTML:

<!-- STUDENT TAB -->
<div id="student" class="tab-pane fade in active">
  <form id="sdntLogForm" class="form-container" action="#" method="post">
    <div class="error">
      <?php
        if(isset($error)){
          echo ($error);
        }
      ?>
    </div>
    <div class="form-group">
      <h1 class="formHeader">Student Login</h1>
      <label for="sdntLogEmail">Email address</label>
      <input type="email" class="form-control" id="sdntLogEmail" name="sdntLogEmail" placeholder="Email" tabindex="1" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$">
    </div>
    <div class="form-group">
      <label for="sdntLogPass">Password</label>
      <input type="password" class="form-control" id="sdntLogPass" name="sdntLogPass" placeholder="Password" tabindex="2">
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox" tabindex="3" id="sdntLogRemember" name="sdntLogRemember">Remember me
      </label>
    </div>
    <button type="submit" class="btn btn-success btn-block" id="sdntLogSubmit" name="sdntLogSubmit" tabindex="4">Login</button>
    <p>If you don't have a student account, you can register one <a href="sdntRegister.php">here</a>.</p>
  </form>
</div>

1 个答案:

答案 0 :(得分:2)

该链接在此处打开一个空白页面,因此有点难以辨别,但由于您在该HTML代码中只有一个p标记,我会尝试:

使用具有尽可能多的特定的CSS选择器,即:

div#student.tab-pane.fade.in.active form#sdntLogForm.form-container p { ... }