Margin problem (or padding) in panel with Bootstrap list

Asked

Viewed 1,890 times

1

I have this margin (or padding) ruining my dashboard, how do I remove it? I’ve tried several things with CSS, changing the padding, to margin etc, but nothing worked.

This is the margin I want to remove:

inserir a descrição da imagem aqui

This is the (simplified) code I’m using:

@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>
<script src="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 ends together with the border of the last list number.

Update: These are the relevant modifications 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 believe the problem may be a bug because of the inclusion of the panel, because when I remove the list, the panel is without this margin (or padding).

html css html5 twitter-bootstrap

2 answers

1


In your case, just take the values of padding class panel-body, then to adjust the list to the panel remove the lower margin of the same, follows 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>
<script src="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 view a little better, just use the following css:

.list-group-item:first-child,
.list-group-item:last-child {
    border-radius: none;
}

  • So, but then he’s just fading the color of the edge, I wish it didn’t have the same space...

  • Don’t you want to take the edge off then? Do you want to take the padding? I’ll rephrase the answer.

  • Yes, it is the space between the edge of the panel and the edge of the line... tomorrow I will rephrase the question better. Thanks!

  • I edited the question, is the margin (or padding, I’m not sure) that I want to withdraw. Thanks.

  • 1

    @gustavox updated the answer, take a look :)

1

Try to reset the edge of the panel

.panel-primary {
    border: 0 none;
}

  • I edited the question, is the margin (or padding, I’m not sure) that I want to withdraw. Thanks.

Browser other questions tagged html css html5 twitter-bootstrap

You are not signed in. Login or sign up in order to post.