我需要从Bootstrap面板的底部删除填充

时间:2016-05-18 15:24:55

标签: twitter-bootstrap

我已经研究并尝试了各种方法来移除自举面板底部的填充物。我已经尝试将.panel padding-bottom调整为0em,我甚至尝试将.panel高度更改为100%。我所有的努力都失败了。这是我当前代码生成的图片: enter image description here

我正在尝试移除面板底部边框上方的空白区域。这是我正在运行的代码

<head runat="server">
<title><%: Page.Title %> </title>
<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css"/>
<link href="/Content/pas.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
</head>
<body>
<form id="form1" runat="server">          
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-md-12">
                                <asp:Table ID="Table1" runat="server" Width="100%">
                                    <asp:TableRow>
                                        <asp:TableCell>
                                            <asp:Image ID="Image1" runat="server" ImageUrl="~/images/pas_logo.png" />
                                        </asp:TableCell>
                                        <asp:TableCell VerticalAlign="Middle">
                                            <asp:Label ID="Label1" runat="server" Text="Physician Am Surg Management, LLC" CssClass="dark_brown_large"></asp:Label>
                                        </asp:TableCell>
                                        <asp:TableCell HorizontalAlign="Right">
                                            <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/images/facebook.png" Height="35" Width="35" />&nbsp;
                                            <asp:ImageButton ID="ImageButton2" runat="server" ImageUrl="~/images/linkedin.png" Height="35" Width="35" /><br /><br />
                                            <asp:Label ID="Label2" runat="server" Text="(516) 622-2242<br />1979 Marcus Avenue<br />Lake Success, NY&nbsp;11042" CssClass="dark_brown_small"></asp:Label>
                                        </asp:TableCell>
                                    </asp:TableRow>
                                </asp:Table>
                            </div>
                        </div> 
                        <div id="custom-bootstrap-menu" class="navbar navbar-default" role="navigation">
                            <ul class="nav navbar-nav" style="max-width:800px; margin-left:auto; margin-right:auto;">
                                <li><a href="javascript:void(0)">&nbsp;&nbsp;&nbsp;&nbsp;Home</a></li>
                                <li><a href="javascript:void(0)">&nbsp;&nbsp;Mission</a></li>
                                <li><a href="javascript:void(0)">&nbsp;&nbsp;Services</a></li>
                                <li><a href="javascript:void(0)">&nbsp;&nbsp;Partners</a></li>
                                <li><a href="javascript:void(0)">&nbsp;&nbsp;Education</a></li>
                                <li><a href="javascript:void(0)">&nbsp;&nbsp;Contact Us</a></li>
                            </ul>
                        </div>
                        <div class="row">
                            <div class="col-md-12 light_gold_background">
                                <asp:Table ID="Table2" runat="server" CssClass="light_gold_background" Width="100%">                                        
                                    <asp:TableRow>
                                        <asp:TableCell ColumnSpan="6" Height="5px">
                                            &nbsp;
                                        </asp:TableCell>
                                    </asp:TableRow> 
                                    <asp:TableRow>
                                        <asp:TableCell Width="10px">
                                            &nbsp;
                                        </asp:TableCell>
                                        <asp:TableCell Width="5px" CssClass="panel_background">
                                            &nbsp;
                                        </asp:TableCell>
                                        <asp:TableCell CssClass="panel_background" HorizontalAlign="Center">
                                            <asp:Label ID="Label4" runat="server" Text="<U>Welcome to PAS!</U>" CssClass="welcome_to_pass"></asp:Label><br />
                                            <asp:Label ID="Label3" runat="server" Text="Physicians AM Surg Management Group is a<br />consulting firm founded by professionals<br />specializing in regulatory compliance, strategic<br />planning, project management, medical<br />management, and healthcare operations.<br /><br />Our goal is to provide our clients with the<br />information and tools necessary to fulfill their<br />existing or future medical ventures."></asp:Label>
                                        </asp:TableCell>
                                        <asp:TableCell CssClass="panel_background">
                                            <div id="myCarousel" class="carousel slide" data-ride="carousel">
                                    <!-- Indicators -->
                                    <ol class="carousel-indicators">
                                        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                                        <li data-target="#myCarousel" data-slide-to="1"></li>
                                        <li data-target="#myCarousel" data-slide-to="2"></li>
                                        <li data-target="#myCarousel" data-slide-to="3"></li>
                                    </ol>

                                    <!-- Wrapper for slides -->
                                    <div class="carousel-inner" role="listbox">
                                        <div class="item active">
                                            <img src="images/1003091227.jpg" alt="Chania"  height="300" width="370" />
                                            <div class="carousel-caption">
                                                <h3>Bryce</h3>
                                                <p>At CitiField.</p>
                                            </div>
                                        </div>
                                        <div class="item">
                                            <img src="images/lulu.jpg" alt="Lulu" height="300" width="370" />
                                            <div class="carousel-caption">
                                                <h3>Lulu</h3>
                                                <p>She was a good dog</p>
                                            </div>
                                        </div>
                                        <div class="item">
                                            <img src="images/sienna.jpg" alt="Sienna"  height="300" width="370" />
                                            <div class="carousel-caption">
                                                <h3>Sienna</h3>
                                                <p>Sienna running in North Carolina.</p>
                                            </div>
                                        </div>
                                        <div class="item">
                                            <img src="images/Untitled.png" alt="Bartolo"  height="300" width="370" />
                                            <div class="carousel-caption">
                                                <h3>Bartolo</h3>
                                                <p>First home run.</p>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- Left and right controls -->
                                    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                                        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                                        <span class="sr-only">Previous</span>
                                    </a>
                                    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                                        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                                        <span class="sr-only">Next</span>
                                    </a>
                                </div>
                                        </asp:TableCell>
                                        <asp:TableCell Width="5px" CssClass="panel_background">
                                            &nbsp;
                                        </asp:TableCell>
                                        <asp:TableCell Width="10px">
                                            &nbsp;
                                        </asp:TableCell>
                                    </asp:TableRow>
                                    <asp:TableRow>
                                        <asp:TableCell ColumnSpan="6" Height="5px">
                                            &nbsp;
                                        </asp:TableCell>
                                    </asp:TableRow>                                        
                                </asp:Table>                                    
                                <asp:Table ID="Table3" runat="server" CssClass="light_gold_background" Width="100%" CellPadding="0" CellSpacing="0">
                                    <asp:TableRow>
                                        <asp:TableCell ColumnSpan="2" HorizontalAlign="Center" VerticalAlign="Middle">
                                            <asp:ImageButton ID="ImageButton3" runat="server" ImageUrl="~/images/compliance_meeting_issues.png" />
                                        </asp:TableCell>
                                        <asp:TableCell ColumnSpan="2" HorizontalAlign="Center" VerticalAlign="Middle">
                                            <asp:ImageButton ID="ImageButton4" runat="server" ImageUrl="~/images/deductible_and_collecting_patient_balances.png" />
                                        </asp:TableCell>
                                        <asp:TableCell ColumnSpan="2" HorizontalAlign="Center" VerticalAlign="Middle">
                                            <asp:ImageButton ID="ImageButton5" runat="server" ImageUrl="~/images/business_insurance.png" />
                                        </asp:TableCell>
                                    </asp:TableRow>
                                    <asp:TableRow>
                                        <asp:TableCell ColumnSpan="6" Height="5px">
                                            &nbsp;
                                        </asp:TableCell>
                                    </asp:TableRow>
                                    <asp:TableRow>
                                        <asp:TableCell ColumnSpan="2" HorizontalAlign="Center" VerticalAlign="Top" CssClass="under_button_text">
                                            <asp:Label ID="Label5" runat="server" Text="In this email series we will<br />examine some of the most<br />important topics that should<br />be discussed during<br />compliance meeting."></asp:Label>
                                        </asp:TableCell>
                                        <asp:TableCell ColumnSpan="2" HorizontalAlign="Center" VerticalAlign="Top" CssClass="under_button_text">
                                            <asp:Label ID="Label6" runat="server" Text="What should you be doing to<br />ensure that you are<br />collecting everything that<br />you should be"></asp:Label>
                                        </asp:TableCell>
                                        <asp:TableCell ColumnSpan="2" HorizontalAlign="Center" VerticalAlign="Top" CssClass="under_button_text">
                                            <asp:Label ID="Label7" runat="server" Text="Any busines that has<br />property needs to insure<br />against loss of the property<br />as a result of theft, fire,<br />wind, flood."></asp:Label>
                                        </asp:TableCell>
                                    </asp:TableRow>
                                    <asp:TableRow>
                                        <asp:TableCell ColumnSpan="6" Height="5px">
                                            &nbsp;
                                        </asp:TableCell>
                                    </asp:TableRow>
                                </asp:Table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>
</body>
</html>

这是我的自定义pas.css文件

.welcome_to_pass{
color: #3A2303;  
font-size: 22px;
font-weight: normal;
text-align: center;
font-family:'Times New Roman', Times, serif;
}
.under_button_text{
color: #3A2303;  
font-size: 14px;
font-weight: bold;
text-align: center;
font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
.dark_brown_large{
color: #3A2303;  
font-size: 23px;
font-weight: bold;
text-align: center;
}
.dark_brown_small{
color: #3A2303;  
font-size: 12px;
font-weight: bold;
}
.light_brown{
color: #804E07;
}
.light_gold{
color: #C2C6A6;
}
.light_gold_background{
background-color: #C2C6A6;
}
.light_brown_background{
background-color: #804E07;
}
.dark_brown_background{
background-color: #3A2303;
}
.panel_background{
color: #FFFFFF;
background-color: #AD894B;
}
#custom-bootstrap-menu.navbar-default .navbar-brand {
color: rgba(255, 255, 255, 1);
}
#custom-bootstrap-menu.navbar-default {
font-size: 18px;
font-weight: bold;
background-color: rgba(58, 35, 3, 1);
border-width: 1px;
border-radius: 4px;
}
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a {
color: rgba(255, 255, 255, 1);
background-color: rgba(248, 248, 248, 0);
}
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:hover,
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:focus {
color: #C2C6A6;
font-weight: bold;
background-color: rgba(128, 78, 7, 1);
}
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a,
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:hover,
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:focus {    
color: #363636;
background-color: rgba(231, 231, 231, 1);
}
#custom-bootstrap-menu.navbar-default .navbar-toggle {
border-color: #ddd;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle:hover,
#custom-bootstrap-menu.navbar-default .navbar-toggle:focus {
background-color: #ddd;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle .icon-bar {
background-color: #888;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle:hover .icon-bar,
#custom-bootstrap-menu.navbar-default .navbar-toggle:focus .icon-bar {
background-color: #3a2303;
}
.panel {
/*border: 0;*/
border-width: 5px;
border-color: #3A2303;
padding-bottom: 0em;
height: 100%;
}

非常感谢任何帮助。 乔纳森

1 个答案:

答案 0 :(得分:2)

您需要从.panel-body类中删除填充。

.panel-body {padding-bottom:0;}

http://www.bootply.com/jsHwsrbQXq