Question

I am using a sidebar to have a list of URL links or buttons if you will but I also need some dropdown buttons/lists in there as well.

I am having an issue of having it look consistently alike and also fill the width of the container also as front end isn't my strongest suite am struggling to get it to look how I want.

You can see that the list within the sidebar is the full width across.....but the button isn't so I need to get it the whole way across and look consistent with the list or alternatively somehow throw a drop down menu on top of the list if required, I have tried to maniputlate it via using authors = [] for name in names: author, created = Author.objects.get_or_create(name=name) authors.append(author) return authors and btn-block to no joy

I need to have a separate buttons for the drop down button seen in example.

width 100%

jQuery(function($) {
  $(document).ready(function() {
    $('[data-toggle=offcanvas]').click(function() {
      if ($('.sidebar-offcanvas').css('background-color') == 'rgb(255, 255, 255)') {
        $('.list-group-item').attr('tabindex', '-1');
      } else {
        $('.list-group-item').attr('tabindex', '');
      }
      $('.row-offcanvas').toggleClass('active');

    });
  });

});

body {
  padding-top: 50px;
}
/*
 * Style tweaks
 * --------------------------------------------------
 */

html,
body {
  overflow-x: hidden;
  /* Prevent scroll on narrow devices */
  height: 100%;
}
body {
  padding-top: 70px;
}
footer {
  padding: 30px 0;
}
.navbar-inverse .navbar-brand:hover,
.navbar-inverse .navbar-brand:focus {
  background-color: transparent;
  color: #999999;
}
.head {
  background: #668B8B;
  color: #000000;
}
.side-contain {
  margin-top: 5px;
  border: 2px solid #668B8B;
  border-radius: 10px;
}
/*
 * Off Canvas
 * --------------------------------------------------
 * Greater thav 768px shows the menu by default and also flips the semantics
 * The issue is to show menu for large screens and to hide for small
 * Also need to do something clever to turn off the tabs for when the navigation is hidden
 * Otherwise keyboard users cannot find the focus point
 * (For now I will ignore that for mobile users and also not worry about
 * screen re-sizing popping the menu out.)
 */

@media screen and (min-width: 768px) {
  .row-offcanvas {
    position: relative;
    -webkit-transition: all .25s ease-out;
    -moz-transition: all .25s ease-out;
    transition: all .25s ease-out;
  }
  .row-offcanvas-right {
    right: 25%;
  }
  .row-offcanvas-left {
    left: 25%;
  }
  .row-offcanvas-right .sidebar-offcanvas {
    right: -25%;
    /* 3 columns */
    background-color: rgb(255, 255, 255);
  }
  .row-offcanvas-left .sidebar-offcanvas {
    left: -25%;
    /* 3 columns */
    background-color: rgb(255, 255, 255);
  }
  .row-offcanvas-right.active {
    right: 0;
    /* 3 columns */
  }
  .row-offcanvas-left.active {
    left: 0;
    /* 3 columns */
  }
  .row-offcanvas-right.active .sidebar-offcanvas {
    background-color: rgb(254, 254, 254);
  }
  .row-offcanvas-left.active .sidebar-offcanvas {
    background-color: rgb(254, 254, 254);
  }
  .row-offcanvas .content {
    width: 75%;
    /* 9 columns */
    -webkit-transition: all .25s ease-out;
    -moz-transition: all .25s ease-out;
    transition: all .25s ease-out;
  }
  .row-offcanvas.active .content {
    width: 100%;
    /* 12 columns */
  }
  .sidebar-offcanvas {
    position: absolute;
    top: 0;
    width: 25%;
    /* 3 columns */
  }
}
@media screen and (max-width: 767px) {
  .row-offcanvas {
    position: relative;
    -webkit-transition: all .25s ease-out;
    -moz-transition: all .25s ease-out;
    transition: all .25s ease-out;
  }
  .row-offcanvas-right {
    right: 0;
  }
  .row-offcanvas-left {
    left: 0;
  }
  .row-offcanvas-right .sidebar-offcanvas {
    right: -50%;
    /* 6 columns */
  }
  .row-offcanvas-left .sidebar-offcanvas {
    left: -50%;
    /* 6 columns */
  }
  .row-offcanvas-right.active {
    right: 50%;
    /* 6 columns */
  }
  .row-offcanvas-left.active {
    left: 50%;
    /* 6 columns */
  }
  .sidebar-offcanvas {
    position: absolute;
    top: 0;
    width: 50%;
    /* 6 columns */
  }
}

I have attached a JS fiddle also: https://jsfiddle.net/z2a7jr68/1/

Answer 1

You can add  : btn-group-justified class to btn-group and width : 90% to next button

<div class="btn-group btn-group-justified" role="group">
                    <button class="btn btn-default" type="button" style="
            width: 90%;
        ">Dropdown</button>
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      <span class="caret"></span>
                      <span class="sr-only">Toggle Dropdown</span>
                    </button>
                    <ul class="dropdown-menu">
                      <li><a href="#">HTML</a></li>
                      <li><a `enter code here`href="#">CSS</a></li>
                      <li><a href="#">JavaScript</a></li>
                    </ul>
                  </div>

Answer 2

将以下样式添加到下拉按钮。

<div class="btn-group" style="width:100%">
        <button class="btn btn-default" type="button" style="width:80%">Dropdown</button>
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="width:20%;">
          <span class="caret"></span>
          <span class="sr-only">Toggle Dropdown</span>
        </button>
        <ul class="dropdown-menu" style="width:100%">
          <li><a href="#">HTML</a>
          </li>
          <li><a href="#">CSS</a>
          </li>
   <li><a href="#">JavaScript</a>
 </li>

Bootstrap Dropdown button width issue

2 个答案: