时间戳

首页 > 解决方案 > 引导向列添加颜色

html - 引导向列添加颜色

问题描述

所以我在引导时遇到了这个问题，我有一行 3 列：

而且我不希望我想要这样的东西： 在此处输入图像描述

背景颜色只覆盖信息而不是覆盖整个列。这是代码：

<div class='container-fluid'>
   <div class="row">
      <div class ="row " style = "margin-bottom: 5px;padding:0px;margin-right: 0px;margin-left:0px; ">
         <div class = "col-md-4" style = "margin:0px;padding:0px;"></div>
         <div class = "col-md-8" style = "border:none;margin:0px;background-color: #dcfdd7;">
            <div class = "row ">
               <div class = "col-md-12 " style = "margin:0px;padding:0px;">
                  <div class = "col-md-6">
                     <g:if test="${cus.status =='Inactive'}">
                        <g:form class="activateStatus" controller="customer" action="activateStatus" id = "${cus.id}">
                           <button type="button" class="btn btn-success activate-Status" style ="color:white;font-weight: bold">Activate</button>
                        </g:form>
                     </g:if>
                     <g:if test="${cus.status =='Active'}">
                        <g:form class="changeStatus" controller="customer" action="changeStatus" id = "${cus.id}">
                           <button type="button" class="btn btn-danger change-Status" style ="color:white;font-weight: bold">Deactivate</button>
                        </g:form>
                     </g:if>
                     <g:link action="index" controller="customer"><button id = "back" type="button" class="btn btn-primary" style = "font-weight: bold">Back</button></g:link>
                     <g:link action="editCustomer" id="${cus.id}"><button id = "edit" type="button" class="btn" style = " font-weight: bold;color: white;background-color:#1f549c"><i id = "add-icon" class="fa fa-edit" aria-hidden="true"></i>Edit</button></g:link>
                  </div>
                  <div class = "col-md-4"></div>
                  <div class = "col-md-2"></div>
               </div>
            </div>
            <div class = "row" style = "padding:0px;margin:0px;">
               <div class = "col-md-12">
                  <div class="row">
                     <div class="col-md-4" style = "padding:0px;margin:0px;">
                        <h4>Name:</h4>
                     </div>
                     <div class="col-md-5" style = "padding:0px;margin:0px;">
                        <h4>${cus.name}</h4>
                     </div>
                  </div>
                  <div class="row">
                     <div class="col-md-4" style = "padding:0px;margin:0px;">
                        <h4>Code:</h4>
                     </div>
                     <div class="col-md-5" style = "padding:0px;margin:0px;">
                        <h4>${cus.code}</h4>
                     </div>
                  </div>
                  <div class="row">
                     <div class="col-md-4" style = "padding:0px;margin:0px;">
                        <h4>Contact Person:</h4>
                     </div>
                     <div class="col-md-5" style = "padding:0px;margin:0px;">
                        <h4>${cus.contactPerson}</h4>
                     </div>
                  </div>
                  <div class="row">
                     <div class="col-md-4" style = "padding:0px;margin:0px;">
                        <h4>Status:</h4>
                     </div>
                     <div class="col-md-5" style = "padding:0px;margin:0px;">
                        <h4>${cus.status}</h4>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <input type="hidden" id="customerId" value="${cus.id}">
   </div>
</div>
</div>

非常感谢。

标签： htmlcssbootstrap-4

解决方案

我尝试制作同一个网站，但您的代码对于您提出的简单问题来说太复杂了，您应该记住的主要概念是“保持简单”，这样对您和您自己的帮助都很容易。

代码 ：

https://stackblitz.com/edit/web-platform-v9i4fh?file=index.html

直播网站： https ://web-platform-v9i4fh.stackblitz.io/

这是一种方法，但是在你的代码中你有太多的东西，很难理解如何在那里解决它。你需要记住 CSS 的主要概念。几分钟后，我将浏览您的代码并尝试弄清楚发生了什么

推荐阅读