html - 选项卡面板空间

Question

我有一个 Bootstrap 选项卡 Pane ，我尝试在一些空间之间创建两个细节，但它不起作用，你可以理解它，看图片我该如何解决这个问题，请帮助我解决它，我需要这样的

问题是这样的

我的代码部分HTML

<div class="notification-group">
  <div class="col-lg-6 col-sm-6">

      <div class="btn-pref btn-group btn-group-justified btn-group-lg" role="group" aria-label="...">
          <div class="btn-group" role="group">
              <button type="button" id="stars" class="btn btn-primary" href="#tab1" data-toggle="tab">
                feed (10)
              </button>
          </div>
          <div class="btn-group" role="group">
              <button type="button" id="favorites" class="btn btn-default" href="#tab2" data-toggle="tab">

                Task (03)
              </button>
          </div>

      </div>

         <div class="well">

        <div class="tab-content">
          <div class="tab-pane fade in active" id="tab1">
            <h4>This is tab 12</h4>

          </div>

<div class="tab-pane fade in active" id="tab1">
  <h4>This is tab 12</h4>

</div>
     <div class="tab-pane fade in" id="tab2">
            <h4>This is tab 22</h4>
          </div>

        </div>

      </div>
      </div>
</div>

CSS

.notification-group  .btn-group > .btn, .btn-group-vertical > .btn {
    position: relative;
    float: left;
}



.btn-group > .btn, .btn-group-vertical > .btn {
    position: relative;
    float: left;
}



.notification-group .btn-default {
  color: black;
    background-color: #ffffff;
    border-color: #ccc;
}




.notification-group .btn-primary {
    color: black;
    background-color:#e5e5e5;
    border-color: #d7d7d7;
}


.notification-group .well {
    min-height: 20px;
    padding: 19px; width: 382px;
    margin: 5px;
    background-color: #e5e5e5;
    border: 1px solid #e3e3e3;
    border-radius: 0px; margin-left: -5px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);

}



.notification-group  .tab-content {
    height: 28px;
    width: 100%;

}

Answer 1

您已应用 .notification-group .well 根据您的要求更改宽度值。例如你可以使用 width: 50%;正如我在以下代码中所做的那样。

.notification-group .well {
    min-height: 20px;
    padding: 19px; **width: 382px;** /* width: 50%; */
    margin: 5px;
    background-color: #e5e5e5;
    border: 1px solid #e3e3e3;
    border-radius: 0px; margin-left: -5px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
}