Question

我使用引导程序创建了一个彩色框。我想添加一条水平线，从左到右，如第二张图片所示。我尝试在按钮中添加带边框的新div，但它不适合框的整个宽度。

图：带边框的图像无法放入正确的容器

图：容器中的预期合适边框

这是我的代码。

.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet" />
<br>
<br>
<div class="container" style="color:white;">
  <div>
    <div class="row row-eq-height">
      <div class="col-lg-5 col-md-5">
        <div class="row row-eq-height">
          <div class="col-md-4 col-lg-4" style="background-color:darkorange;padding:15px; text-align:center;">
            <div><i class="fa fa-book fa-5x"></i></div>
            <div style="color:white;font-size:large;">Grades</div>
          </div>
          <div class="col-md-8 col-lg-8" style="background-color:#FFB964; font-weight:bold; ">

            <div class="col-md-12 col-lg-12">
              <span style="font-size:48px;color:silver;">0</span>
              <span style="font-size:large;">New Grades</span>
            </div>
            <div class="col-md-12" style="border-bottom:1px solid red; "></div>
            <div class="col-md-12 col-lg-12" style="padding:5px;">
              <span style="float:left;">Last Grade: 100</span> <span style="float:right;">Date: 3/26</span>
            </div>
            <div class="col-md-12 col-lg-12" style="padding:5px;">
              <span style="float:left;">Name: Animal Thumbnail</span>
            </div>
          </div>
        </div>

      </div>
      <div class="col-lg-5 col-md-5 col-lg-offset-2 col-md-offset-2">
        <div class="row row-eq-height">
          <div class="col-md-4 col-lg-4" style="background-color:deepskyblue;padding:15px; text-align:center;">
            <div><i class="fa fa-pencil fa-5x"></i></div>
            <div style="color:white;font-size:large;">Grades</div>
          </div>
          <div class="col-md-8 col-lg-8" style="background-color:#5BD4FC; font-weight:bold; ">
            <div class="col-md-12 col-lg-12">
              <span style="font-size:48px;color:silver;padding:10px;">0</span>
              <span style="font-size:large;">New Assignments</span>
            </div>
            <div class="col-md-12" style="border-bottom:1px solid red; "></div>

          </div>
        </div>
      </div>
    </div>
  </div>
  <div style="padding-top:50px;">
    <div class="row row-eq-height">
      <div class="col-lg-5 col-md-5">
        <div class="row row-eq-height">
          <div class="col-md-4 col-lg-4" style="background-color:rebeccapurple;padding:15px; text-align:center;">
            <div><i class="fa fa-check-square-o fa-5x"></i></div>
            <div style="color:white;font-size:large;">Grades</div>
          </div>
          <div class="col-md-8 col-lg-8" style="background-color:#8F59FF; font-weight:bold; ">
            <div class="col-md-12 col-lg-12">
              <span style="font-size:48px;color:silver;padding:10px;">0</span>
              <span style="font-size:large;">New Postings</span>
            </div>
            <div class="col-md-12" style="border-bottom:1px solid red; "></div>
            <div class="col-md-12 col-lg-12" style="padding:5px;">
              <span style="float:left;">Last Abs Per: 07</span> <span style="float:right;">Date: 3/26</span>
            </div>
            <div class="col-md-12 col-lg-12" style="padding:5px;">
              <span style="float:left;">Name: Absent-Unexcused</span>
            </div>
          </div>
        </div>

      </div>
      <div class="col-lg-5 col-md-5 col-lg-offset-2 col-md-offset-2">
        <div class="row row-eq-height">
          <div class="col-md-4 col-lg-4" style="background-color:crimson;padding:15px; text-align:center;">
            <div><i class="fa fa-comment-o fa-5x"></i></div>
            <div style="color:white;font-size:large;">Messages</div>
          </div>
          <div class="col-md-8 col-lg-8" style="background-color:#F16A85; font-weight:bold; ">
            <div class="col-md-12 col-lg-12">
              <span style="font-size:48px;color:silver;padding:10px;">0</span>
              <span style="font-size:large;">New Messages</span>
            </div>
            <div class="col-md-12" style="border-bottom:1px solid red; "></div>

          </div>
        </div>
      </div>
    </div>
  </div>

</div>

https://codepen.io/anon/pen/ZPNepV

我的边界不适合正确的容器。

<div class="col-md-12" style="border-bottom:1px solid red; "></div>

Answer 1

引导程序3 中用于删除列填充的限制很少，您需要使用padding: 0 !important CSS 来编写p-0类strong>并在所有正确的部分添加.p-0 { padding: 0 !important; } .row-eq-height { display: flex; }类。我刚刚更新了您的代码，希望对您有所帮助。谢谢

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"> <div class="container" style="color:white;"> <div> <div class="row row-eq-height"> <div class="col-lg-5 col-md-5" > <div class="row row-eq-height"> <div class="col-md-4 col-lg-4" style="background-color:darkorange;padding:15px; text-align:center;"> <div><i class="fa fa-book fa-5x" ></i></div> <div style="color:white;font-size:large;">Grades</div> </div> <div class="col-md-8 col-lg-8 p-0" style="background-color:#FFB964; font-weight:bold; "> <div class="col-md-12 col-lg-12" > <span style="font-size:48px;color:silver;">0</span> <span style="font-size:large;">New Grades</span> </div> <div class="col-md-12" style="border-bottom:1px solid red; "></div> <div class="col-md-12 col-lg-12" style="padding:5px;"> <span style="float:left;">Last Grade: 100</span> <span style="float:right;">Date: 3/26</span> </div> <div class="col-md-12 col-lg-12" style="padding:5px;"> <span style="float:left;">Name: Animal Thumbnail</span> </div> </div> </div> </div> <div class="col-lg-5 col-md-5 col-lg-offset-2 col-md-offset-2"> <div class="row row-eq-height"> <div class="col-md-4 col-lg-4" style="background-color:deepskyblue;padding:15px; text-align:center;"> <div><i class="fa fa-pencil fa-5x" ></i></div> <div style="color:white;font-size:large;">Grades</div> </div> <div class="col-md-8 col-lg-8 p-0" style="background-color:#5BD4FC; font-weight:bold; "> <div class="col-md-12 col-lg-12"> <span style="font-size:48px;color:silver;padding:10px;">0</span> <span style="font-size:large;">New Assignments</span> </div> <div class="col-md-12" style="border-bottom:1px solid red; "></div> <div class="col-md-12 col-lg-12" style="padding:5px;"> <span style="float:left;">Last Grade: 100</span> <span style="float:right;">Date: 3/26</span> </div> <div class="col-md-12 col-lg-12" style="padding:5px;"> <span style="float:left;">Name: Animal Thumbnail</span> </div> </div> </div> </div> </div> </div> <div style="padding-top:50px;"> <div class="row row-eq-height"> <div class="col-lg-5 col-md-5" > <div class="row row-eq-height"> <div class="col-md-4 col-lg-4" style="background-color:rebeccapurple;padding:15px; text-align:center;"> <div><i class="fa fa-check-square-o fa-5x" ></i></div> <div style="color:white;font-size:large;">Grades</div> </div> <div class="col-md-8 col-lg-8 p-0" style="background-color:#8F59FF; font-weight:bold; "> <div class="col-md-12 col-lg-12"> <span style="font-size:48px;color:silver;padding:10px;">0</span> <span style="font-size:large;">New Postings</span> </div> <div class="col-md-12" style="border-bottom:1px solid red; "></div> <div class="col-md-12 col-lg-12" style="padding:5px;"> <span style="float:left;">Last Abs Per: 07</span> <span style="float:right;">Date: 3/26</span> </div> <div class="col-md-12 col-lg-12" style="padding:5px;"> <span style="float:left;">Name: Absent-Unexcused</span> </div> </div> </div> </div> <div class="col-lg-5 col-md-5 col-lg-offset-2 col-md-offset-2"> <div class="row row-eq-height"> <div class="col-md-4 col-lg-4" style="background-color:crimson;padding:15px; text-align:center;"> <div><i class="fa fa-comment-o fa-5x" ></i></div> <div style="color:white;font-size:large;">Messages</div> </div> <div class="col-md-8 col-lg-8 p-0" style="background-color:#F16A85; font-weight:bold; "> <div class="col-md-12 col-lg-12"> <span style="font-size:48px;color:silver;padding:10px;">0</span> <span style="font-size:large;">New Messages</span> </div> <div class="col-md-12" style="border-bottom:1px solid red; "></div> <div class="col-md-12 col-lg-12" style="padding:5px;"> <span style="float:left;">Last Grade: 100</span> <span style="float:right;">Date: 3/26</span> </div> <div class="col-md-12 col-lg-12" style="padding:5px;"> <span style="float:left;">Name: Animal Thumbnail</span> </div> </div> </div> </div> </div> </div> </div>

SET bc:= 0 UPDATE test.cashbook Set balanceBroughtFoward = bc, balanceCarriedFoward = (bc:= totalCash - (Lodgement + Expenses) )

Answer 2

尝试使用!important规则将div边距设置为0。

两格之间的水平线

2 个答案: