堆棧內存溢出
  簡體   English   中英

Bootstrap下拉按鈕寬度問題

[英]Bootstrap Dropdown button width issue

 原文  2016-06-06 14:17:20  0   2    javascript/ jquery/ html/ css/ twitter-bootstrap

問題描述

我在邊欄上使用URL鏈接或按鈕的列表（如果可以的話），但我也需要在其中添加一些下拉按鈕/列表。

我有一個問題，就是要使它看起來始終如一，並且還要填充容器的寬度，因為前端不是我最強大的套件，我正在努力使它看起來像我想要的。

您可以看到側邊欄中的列表是整個寬度。....但是按鈕不是，因此我需要整個顯示並與列表保持一致，或者以某種方式在其上放置一個下拉菜單如果需要的話，在列表的頂部，我嘗試通過使用btn-block和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 */ } } 
 <!DOCTYPE html> <html lang="en"> <head> <meta name="generator" content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" /> <meta charset="utf-8" /> <title>Test</title> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" /> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> </head> <body> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <a class="navbar-brand">Test</a> </div> <div id="navbar" class="navbar-collapse collapse"> <form action="/logoutadmin" class="navbar-form navbar-right"> <button class="btn btn-success" type="submit" id="user" onsubmit="return false">Log Out</button> </form> </div> </div> </nav> <div class="container-fluid"> <button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle nav</button> <div class="row row-offcanvas row-offcanvas-left"> <div class="col-xs-6 col-sm-2 sidebar-offcanvas" id="sidebar" role="navigation"> <div class="side-contain"> <div class="panel-heading head" role="tab" id="headingOne"> <h2 class="panel-title">My Account</h2> </div> <div class="btn-group"> <button class="btn btn-default" type="button">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 href="#">CSS</a> </li> <li><a href="#">JavaScript</a> </li> </ul> </div> <a href="#" class="list-group-item btn">- Placeholder</a> <a href="#" class="list-group-item btn">- Placeholder</a> <a href="#" class="list-group-item btn">- Placeholder</a> <a href="#" class="list-group-item btn">- Placeholder</a> </div> </div> <!--/span--> <div class="col-xs-12 col-sm-10 content"> <div> <h1 class="main-head">Test</h1> <p class="lead">Hallo </div> </div> <!--/span--> </div> <!--/row--> </div> <!-- /.container --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"> </script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> </body> </html>

我還附加了一個JS小提琴： https : //jsfiddle.net/z2a7jr68/1/

2 個解決方案

解決方案1
 1  2016-06-06 14:37:35

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>

解決方案2
 0 已采納  2016-06-06 14:40:39

在您的下拉按鈕中添加以下樣式。 

<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>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 Bootstrap Multiselect按鈕寬度問題 在Bootstrap 3按鈕下拉菜單上添加幻燈片功能的問題 在引導程序下拉列表中進行選擇后，保留按鈕寬度 Bootstrap下拉表格寬度 jQuery，引導下拉菜單問題 多級引導程序下拉菜單出現問題 Bootstrap Multiple Dropdown問題 在Bootstrap中動態更改下拉寬度 Bootstrap導航欄寬度問題 引導程序下拉按鈕
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM