Bootstrap list panel problem

Navigation
1

I have this margin (or padding) spoiling my panel, how do I remove it? I've tried several things with CSS, changing padding , margin etc, but nothing worked.

This is the margin I want to remove:

Thisisthe(simplified)codeI'musing:

@charset "UTF-8";

label  {
    display: inline-block;
    letter-spacing: 1px;
    vertical-align: bottom;
    padding: 0;
    margin:0;
    color: #ffffff;
}

label.dados {

    color: #242f62;
    letter-spacing: 0;
    vertical-align: bottom;
    padding: 0;
    margin:0;
    width: 70%;
    font-weight: normal;
}

thead {
    background-color: #0e7363;
}

a {

    color: #161d3a;
}

.nav-tabs.success > li.active > a,
.nav-tabs.success > li.active > a:hover,
.nav-tabs.success > li.active > a:focus {
    background-color: #dff0d8;
    border-color: #dff0d8;
}

.nav-tabs.insuccess > li.active > a,
.nav-tabs.insuccess > li.active > a:hover,
.nav-tabs.insuccess > li.active > a:focus
{
    background-color: #f2dede;
    border-color: #f2dede;
   
}

.panel-body {
    height: 100%;
    padding: 0;
    margin-bottom: 0;

}

.list-group-item {

    padding: 8px;
    letter-spacing: 1px;
}

.list-group-item.dadoss {

    padding: 3px;
}

.label-primary {
    horiz-align: right;
}

ul {

    text-align: left;
}

.label-primary {

    padding: 10px;
}

p {
    font-size: 10pt;

}

.dados2 {

    text-align: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
        <div class=" col-md-2"></div>
        <div class="col-md-4">
    <div class="row">
        <div class="panel panel-primary">
        <div class="panel-heading" align="center">
            Título
        </div>
        <div class="panel-body">
            <ul class="list-group hover">
                <li class="list-group-item dadoss"><label class="dados"> Linha 1:</label></li>
                <li class="list-group-item dadoss"><label class="dados"> Linha 2:</label></li>
                <li class="list-group-item dadoss"><label class="dados"> Linha 3:</label></li>
            </ul>
        </div>
        </div>
        <div class="col-md-3"></div>
    </div>
    </div>

I need the panel border to end along with the border of the last number in the list.

Update: These were the relevant changes I've tested in CSS: 

@charset "UTF-8";

.panel-body {
    height: 100%;
    padding: 0;
    margin-bottom: 0;

}

.list-group-item {

    padding: 8px;
    letter-spacing: 1px;
}

ul {

    text-align: left;
    padding: 0;
    margin-bottom: 0;
    height: 100%;

}

. panel-primary {

    padding: 0;
    margin-bottom: 0;
    height: 100%;

}

.panel {

    padding: 0;
    margin-bottom: 0;
    height: 100%;

}

. panel-heading {

    padding: 0;
    margin-bottom: 0;
    height: 100%;

}

I think the problem might be a bug because of the inclusion of the list in panel , because when I remove the list, the panel is left without this (or padding).

    
asked by anonymous 23.05.2015 / 22:51

2 answers

1

In your case, just take the values of padding of class panel-body , then to adjust the list to the panel remove the bottom margin of it, follow the code: 

.panel-body {
  padding: 0 !important;
}
.list-group {
  margin-bottom: 0 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />

<div class="panel panel-primary">
  <div class="panel-heading" align="center">
    Título
  </div>
  <div class="panel-body">
    <ul class="list-group hover">
      <li class="list-group-item dadoss">
        <label class="dados">Linha 1:</label>
      </li>
      <li class="list-group-item dadoss">
        <label class="dados">Linha 2:</label>
      </li>
      <li class="list-group-item dadoss">
        <label class="dados">Linha 3:</label>
      </li>
    </ul>
  </div>
</div>

If you want to remove the gray borders from the list and make the visualization a bit better, just use the following css: 

.list-group-item:first-child,
.list-group-item:last-child {
    border-radius: none;
}
    
23.05.2015 / 23:25
1

Try to zero the border of panel 

.panel-primary {
    border: 0 none;
}
    
24.05.2015 / 01:06
List with inline display does not work correctly How to make text disappear from WPF field C #