Question

我使用了bootstrap的Navbar选项卡，我想只显示一行上的九个按钮，但是所有十八个按钮都显示在单行中，按钮中的文本被压缩。全文未显示哪个更长。我想在九个按钮后更改行并显示全文。我没有得到解决方案。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<style>

 .card {
    margin-top: 20px;
    padding: 30px;
    background-color: rgba(214, 224, 226, 0.2);
    -webkit-border-top-left-radius:5px;
    -moz-border-top-left-radius:5px;
    border-top-left-radius:5px;
    -webkit-border-top-right-radius:5px;
    -moz-border-top-right-radius:5px;
    border-top-right-radius:5px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.card.hovercard {
    position: relative;
    padding-top: 0;
    overflow: hidden;
    text-align: center;
    background-color: #fff;
    background-color: rgba(255, 255, 255, 1);
}
.card.hovercard .card-background {
    height: 130px;
}
.card-background img {
    -webkit-filter: blur(25px);
    -moz-filter: blur(25px);
    -o-filter: blur(25px);
    -ms-filter: blur(25px);
    filter: blur(25px);
    margin-left: -100px;
    margin-top: -200px;
    min-width: 130%;
}
.card.hovercard .useravatar {
    position: absolute;
    top: 15px;
    left: 0;
    right: 0;
}
.card.hovercard .useravatar img {
    width: 100px;
    height: 100px;
    max-width: 100px;
    max-height: 100px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    border: 5px solid rgba(255, 255, 255, 0.5);
}
.card.hovercard .card-info {
    position: absolute;
    bottom: 14px;
    left: 0;
    right: 0;
}
.card.hovercard .card-info .card-title {
    padding:0 5px;
    font-size: 20px;
    line-height: 1;
    color: #262626;
    background-color: rgba(255, 255, 255, 0.1);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
.card.hovercard .card-info {
    overflow: hidden;
    font-size: 12px;
    line-height: 20px;
    color: #737373;
    text-overflow: ellipsis;
}
.card.hovercard .bottom {
    padding: 0 20px;
    margin-bottom: 17px;
}
.btn-pref .btn {
    -webkit-border-radius:0 !important;
}


</style>
<body>
   <div class="container">

 <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" class="btn btn-primary" href="#tab1" data-toggle="tab">
                <div class="hidden-xs">Sample</div>
            </button>
        </div>
        <div class="btn-group" role="group">
            <button type="button" class="btn btn-default" href="#tab2" data-toggle="tab">
                <div class="hidden-xs">Plot Description</div>
            </button>
        </div>
        <div class="btn-group" role="group">
            <button type="button" class="btn btn-default" href="#tab3" data-toggle="tab">
                <div class="hidden-xs">Ntfp</div>
            </button>
        </div>
        <div class="btn-group" role="group">
            <button type="button" class="btn btn-default" href="#tab4" data-toggle="tab">
                <div class="hidden-xs">Sampling Form</div>
            </button>
        </div>
        <div class="btn-group" role="group">
            <button type="button" class="btn btn-default" href="#tab5" data-toggle="tab">
                <div class="hidden-xs">Sapling Form</div>
            </button>
        </div>
        <div class="btn-group" role="group">
            <button type="button" class="btn btn-default" href="#tab6" data-toggle="tab">
                <div class="hidden-xs">Seedling Form</div>
            </button>
        </div>
         <div class="btn-group" role="group">
            <button type="button" class="btn btn-default" href="#tab7" data-toggle="tab">
                <div class="hidden-xs">Time Form</div>
            </button>
        </div>
         <div class="btn-group" role="group">
            <button type="button"  class="btn btn-default" href="#tab8" data-toggle="tab">
                <div class="hidden-xs">TOF Form</div>
            </button>
        </div>
         <div class="btn-group" role="group">
            <button type="button" class="btn btn-default" href="#tab9" data-toggle="tab">
                <div class="hidden-xs">Tree Climb Form</div>
            </button>
        </div>

        <div class="btn-group" role="group">
            <button type="button" class="btn btn-default" href="#tab9" data-toggle="tab">
                <div class="hidden-xs">Soil Form</div>
            </button>
        </div>

        <div class="btn-group" role="group">
            <button type="button" class="btn btn-default" href="#tab9" data-toggle="tab">
                <div class="hidden-xs">Stand Form</div>
            </button>
        </div>
         <div class="btn-group" role="group">
            <button type="button" class="btn btn-default" href="#tab9" data-toggle="tab">
                <div class="hidden-xs">Stand Form</div>
            </button>
        </div>
         <div class="btn-group" role="group">
            <button type="button" class="btn btn-default" href="#tab9" data-toggle="tab">
                <div class="hidden-xs">Stand Form</div>
            </button>
        </div>
         <div class="btn-group" role="group">
            <button type="button" class="btn btn-default" href="#tab9" data-toggle="tab">
                <div class="hidden-xs">Stand Form</div>
            </button>
        </div>
         <div class="btn-group" role="group">
            <button type="button" class="btn btn-default" href="#tab9" data-toggle="tab">
                <div class="hidden-xs">Stand Form</div>
            </button>
        </div>
         <div class="btn-group" role="group">
            <button type="button" class="btn btn-default" href="#tab9" data-toggle="tab">
                <div class="hidden-xs">Stand Form</div>
            </button>
        </div>
         <div class="btn-group" role="group">
            <button type="button" class="btn btn-default" href="#tab9" data-toggle="tab">
                <div class="hidden-xs">Stand Form</div>
            </button>
        </div>
         <div class="btn-group" role="group">
            <button type="button" class="btn btn-default" href="#tab9" data-toggle="tab">
                <div class="hidden-xs">Stand Form</div>
            </button>
        </div>
         <div class="btn-group" role="group">
            <button type="button" class="btn btn-default" href="#tab9" data-toggle="tab">
                <div class="hidden-xs">Stand Form</div>
            </button>
        </div>
    </div>
     <div class="tab-content">
     <div class="tab-pane  active" id="tab1">C# is also a programming language</div>

      <div class="tab-pane" id="tab2">D# is also a programming language</div>
</div>



   </div>


<script type="text/javascript">
  $(document).ready(function() {
$(".btn-pref .btn").click(function () {
    $(".btn-pref .btn").removeClass("btn-primary").addClass("btn-default");
    // $(".tab").addClass("active"); // instead of this do the below 
    $(this).removeClass("btn-default").addClass("btn-primary");   
});
});
</script>
</body>
</html>

Answer 1

这是您的解决方案。在第九个按钮后添加新的div关闭和新的<div class="btn-pref btn-group btn-group-justified btn-group-lg" role="group" aria-label="...">。

<div class="container">

      <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" class="btn btn-primary" href="#tab1" data-toggle="tab">
                <div class="hidden-xs">Sample</div>
            </button>
        </div>
        <div class="btn-group" role="group">
          <button type="button" class="btn btn-default" href="#tab2" data-toggle="tab">
                <div class="hidden-xs">Plot Description</div>
            </button>
        </div>
        <div class="btn-group" role="group">
          <button type="button" class="btn btn-default" href="#tab3" data-toggle="tab">
                <div class="hidden-xs">Ntfp</div>
            </button>
        </div>
        <div class="btn-group" role="group">
          <button type="button" class="btn btn-default" href="#tab4" data-toggle="tab">
                <div class="hidden-xs">Sampling Form</div>
            </button>
        </div>
        <div class="btn-group" role="group">
          <button type="button" class="btn btn-default" href="#tab5" data-toggle="tab">
                <div class="hidden-xs">Sapling Form</div>
            </button>
        </div>
        <div class="btn-group" role="group">
          <button type="button" class="btn btn-default" href="#tab6" data-toggle="tab">
                <div class="hidden-xs">Seedling Form</div>
            </button>
        </div>
        <div class="btn-group" role="group">
          <button type="button" class="btn btn-default" href="#tab7" data-toggle="tab">
                <div class="hidden-xs">Time Form</div>
            </button>
        </div>
        <div class="btn-group" role="group">
          <button type="button" class="btn btn-default" href="#tab8" data-toggle="tab">
                <div class="hidden-xs">TOF Form</div>
            </button>
        </div>
        <div class="btn-group" role="group">
          <button type="button" class="btn btn-default" href="#tab9" data-toggle="tab">
                <div class="hidden-xs">Tree Climb Form</div>
            </button>
        </div>
      </div>
      <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" class="btn btn-default" href="#tab9" data-toggle="tab">
                <div class="hidden-xs">Soil Form</div>
            </button>
        </div>

        <div class="btn-group" role="group">
          <button type="button" class="btn btn-default" href="#tab9" data-toggle="tab">
                <div class="hidden-xs">Stand Form</div>
            </button>
        </div>
        <div class="btn-group" role="group">
          <button type="button" class="btn btn-default" href="#tab9" data-toggle="tab">
                <div class="hidden-xs">Stand Form</div>
            </button>
        </div>
        <div class="btn-group" role="group">
          <button type="button" class="btn btn-default" href="#tab9" data-toggle="tab">
                <div class="hidden-xs">Stand Form</div>
            </button>
        </div>
        <div class="btn-group" role="group">
          <button type="button" class="btn btn-default" href="#tab9" data-toggle="tab">
                <div class="hidden-xs">Stand Form</div>
            </button>
        </div>
        <div class="btn-group" role="group">
          <button type="button" class="btn btn-default" href="#tab9" data-toggle="tab">
                <div class="hidden-xs">Stand Form</div>
            </button>
        </div>
        <div class="btn-group" role="group">
          <button type="button" class="btn btn-default" href="#tab9" data-toggle="tab">
                <div class="hidden-xs">Stand Form</div>
            </button>
        </div>
        <div class="btn-group" role="group">
          <button type="button" class="btn btn-default" href="#tab9" data-toggle="tab">
                <div class="hidden-xs">Stand Form</div>
            </button>
        </div>
        <div class="btn-group" role="group">
          <button type="button" class="btn btn-default" href="#tab9" data-toggle="tab">
                <div class="hidden-xs">Stand Form</div>
            </button>
        </div>
        <div class="btn-group" role="group">
          <button type="button" class="btn btn-default" href="#tab9" data-toggle="tab">
                <div class="hidden-xs">Stand Form</div>
            </button>
        </div>
      </div>
      <div class="tab-content">
        <div class="tab-pane  active" id="tab1">C# is also a programming language</div>

        <div class="tab-pane" id="tab2">D# is also a programming language</div>
      </div>



    </div>

Answer 2

这是您的解决方案。在第九个按钮后添加新的div关闭和新的<div class="btn-pref btn-group btn-group-justified btn-group-lg" role="group" aria-label="...">。

<div class="container buttoncontainer">
      <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" class="btn btn-primary" href="#tab1" data-toggle="tab">
            <div class="hidden-xs">Sample</div>
          </button>
        </div>
        <div class="btn-group" role="group">
          <button type="button" class="btn btn-default" href="#tab2" data-toggle="tab">
            <div class="hidden-xs">Plot Description</div>
          </button>
        </div>
        <div class="btn-group" role="group">
          <button type="button" class="btn btn-default" href="#tab3" data-toggle="tab">
            <div class="hidden-xs">Ntfp</div>
          </button>
        </div>
        <div class="btn-group" role="group">
          <button type="button" class="btn btn-default" href="#tab4" data-toggle="tab">
            <div class="hidden-xs">Sampling Form</div>
          </button>
        </div>
        <div class="btn-group" role="group">
          <button type="button" class="btn btn-default" href="#tab5" data-toggle="tab">
            <div class="hidden-xs">Sapling Form</div>
          </button>
        </div>
        <div class="btn-group" role="group">
          <button type="button" class="btn btn-default" href="#tab6" data-toggle="tab">
            <div class="hidden-xs">Seedling Form</div>
          </button>
        </div>
        <div class="btn-group" role="group">
          <button type="button" class="btn btn-default" href="#tab7" data-toggle="tab">
            <div class="hidden-xs">Time Form</div>
          </button>
        </div>
        <div class="btn-group" role="group">
          <button type="button" class="btn btn-default" href="#tab8" data-toggle="tab">
            <div class="hidden-xs">TOF Form</div>
          </button>
        </div>
        <div class="btn-group" role="group">
          <button type="button" class="btn btn-default" href="#tab9" data-toggle="tab">
            <div class="hidden-xs">Tree Climb Form</div>
          </button>
        </div>
        <div class="btn-group" role="group">
          <button type="button" class="btn btn-default" href="#tab9" data-toggle="tab">
            <div class="hidden-xs">Soil Form</div>
          </button>
        </div>

        <div class="btn-group" role="group">
          <button type="button" class="btn btn-default" href="#tab9" data-toggle="tab">
            <div class="hidden-xs">Stand Form</div>
          </button>
        </div>
        <div class="btn-group" role="group">
          <button type="button" class="btn btn-default" href="#tab9" data-toggle="tab">
            <div class="hidden-xs">Stand Form</div>
          </button>
        </div>
        <div class="btn-group" role="group">
          <button type="button" class="btn btn-default" href="#tab9" data-toggle="tab">
            <div class="hidden-xs">Stand Form</div>
          </button>
        </div>
        <div class="btn-group" role="group">
          <button type="button" class="btn btn-default" href="#tab9" data-toggle="tab">
            <div class="hidden-xs">Stand Form</div>
          </button>
        </div>
        <div class="btn-group" role="group">
          <button type="button" class="btn btn-default" href="#tab9" data-toggle="tab">
            <div class="hidden-xs">Stand Form</div>
          </button>
        </div>
        <div class="btn-group" role="group">
          <button type="button" class="btn btn-default" href="#tab9" data-toggle="tab">
            <div class="hidden-xs">Stand Form</div>
          </button>
        </div>
        <div class="btn-group" role="group">
          <button type="button" class="btn btn-default" href="#tab9" data-toggle="tab">
            <div class="hidden-xs">Stand Form</div>
          </button>
        </div>
        <div class="btn-group" role="group"> <button type="button" class="btn btn-default" href="#tab9" data-toggle="tab"> <div class="hidden-xs">Disturbance Form</div> </button> </div>
        <div class="btn-group" role="group">
          <button type="button" class="btn btn-default" href="#tab9" data-toggle="tab">
            <div class="hidden-xs">Stand Form</div>
          </button>
        </div>
      </div>
      <div class="tab-content">
        <div class="tab-pane  active" id="tab1">C# is also a programming language</div>

        <div class="tab-pane" id="tab2">D# is also a programming language</div>
      </div>
    </div>

并将此规则添加到您的CSS中。

.buttoncontainer .btn-group {
  display: flex;
  width: auto !important;
}

导航栏选项卡全文未显示内部按钮以及如何更改navtab行？

2 个答案: