水平列表不起作用

Question

我正在嘗試使用Bootstrap水平列表，但它無法正常工作。我該如何解決這個問題？

我試圖讓這個：

目前，我有這樣的：

這裏是我的代碼：

.btn-xs, .btn-group-xs > .btn { 
 
    padding: 1px 5px; 
 
    font-size: 12px; 
 
    line-height: 1.5; 
 
    border-radius: 3px; 
 
    width: 73px; 
 
    height: 38px; 
 
    background-color: #53585f; 
 
    color: white; 
 
    font-family: sans-serif; 
 
} 
 
    .btn-default:hover { 
 

 
    background-color: #b89981; 
 
    color: white; 
 

 
} 
 
ul.list-group:after { 
 
    clear: both; 
 
    display: block; 
 
    content: ""; 
 
} 
 

 
.list-group-item { 
 
    float: left; 
 
} 
 

 
.list-group-item { 
 
    position: relative; 
 
    display: block; 
 
    padding: 10px 15px; 
 
    margin-bottom: -1px; 
 
    background-color: #fff; 
 
    border: 1px solid #ddd; 
 
    width: 73px; 
 
} 
 
.padding20 { 
 
    padding : 10px; 
 
} 
 

 
.textbox { 
 
    line-height: 24px; 
 
} 
 
.liststyle1 { 
 
    margin: 0; 
 
    list-style: none; 
 
    margin-top: 10px; 
 
    line-height: 28px; 
 
    color: #309be8;}

<div class="container"> 
 
<h2>dsd</h2> 
 
    <button type="button" class="btn btn-default btn-xs">Total</button> 
 
     <button type="button" class="btn btn-default btn-xs">Check-Out</button> 
 
      <button type="button" class="btn btn-default btn-xs">Check-In</button> 
 
      <button type="button" class="btn btn-default btn-xs">Alerts</button> 
 
       <button type="button" class="btn btn-default btn-xs">Tentative</button> 
 

 

 
</div> 
 

 
<div class="container list-top"> 
 
    <ul class="list-group"> 
 
    <li class="list-group-item">12Bookings 
 
</li> 
 
    <li class="list-group-item">Dapibus </li> 
 
    <li class="list-group-item">Morbi</li> 
 
    <li class="list-group-item">Porta</li> 
 
    <li class="list-group-item">Vestib</li> 
 
    </ul> 
 
</div>

Answer 1

應用一個Flexbox的解決方案。我在這個過程中清理了CSS。

.btn-xs, 
 
.btn { 
 
    padding: 1px 5px; 
 
    font-size: 12px; 
 
    line-height: 1.5; 
 
    border: none; 
 
    width: 100%; 
 
    height: 38px; 
 
    background-color: #53585f; 
 
    color: white; 
 
    font-family: sans-serif; 
 
    display: block; 
 
} 
 

 
.btn-default:hover { 
 
    background-color: #b89981; 
 
} 
 

 
.list-group { 
 
    display: flex; 
 
    justify-content: flex-start; 
 
} 
 

 
.list-group-item>div { 
 
    height: 38px; 
 
    line-height: 38px; 
 
} 
 

 
.list-group-item { 
 
    background-color: #fff; 
 
    border: 1px solid #ddd; 
 
    list-style: none; 
 
    width: 100px; 
 
    text-align: center; 
 
}

<div class="container"> 
 
    <h2>dsd</h2> 
 
</div> 
 

 
<div class="container list-top"> 
 
    <ul class="list-group"> 
 
    <li class="list-group-item"><button type="button" class="btn btn-default btn-xs">Total</button> 
 
     <div>12Bookings</div> 
 
    </li> 
 
    <li class="list-group-item"><button type="button" class="btn btn-default btn-xs">Check-Out</button> 
 
     <div>Dapibus</div> 
 
    </li> 
 
    <li class="list-group-item"><button type="button" class="btn btn-default btn-xs">Check-In</button> 
 
     <div>Morbi</div> 
 
    </li> 
 
    <li class="list-group-item"><button type="button" class="btn btn-default btn-xs">Alerts</button> 
 
     <div>Porta</div> 
 
    </li> 
 
    <li class="list-group-item"><button type="button" class="btn btn-default btn-xs">Tentative</button> 
 
     <div>Vestib</div> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 2

簡單的解決辦法：只需嘗試將float: left;放到按鈕

LIKE

.btn-xs, .btn-group-xs > .btn { 
    /* your code goes here */ 
    float: left; 
} 

Answer 3

試試這個樣式表...我對你的代碼做了一些修改....

<style type="text/css"> 
     .btn-xs, .btn-group-xs > .btn { 
     padding: 1px 5px; 
     font-size: 12px; 
     line-height: 1.5; 
     border-radius: 3px; 
     width: 77px; 
     height: 38px; 
     background-color: #53585f; 
     color: white; 
     font-family: sans-serif; 
    } 
     .btn-default:hover { 

     background-color: #b89981; 
     color: white; 

    } 
    ul.list-group:after { 
     clear: both; 
     display: block; 
     content: ""; 
    } 

    .list-group-item { 
     float: left; 
    } 

    .list-group-item { 
     position: relative; 
     display: block; 
     padding: 10px 2px; 
     margin-bottom: -1px; 
     background-color: #fff; 
     border: 1px solid #ddd; 
     width: 80px; 
    } 
    .padding20 { 
     padding : 10px; 
    } 

    .textbox { 
     line-height: 24px; 
    } 
    .liststyle1 { 
     margin: 0; 
     list-style: none; 
     margin-top: 10px; 
     line-height: 28px; 
     color: #309be8;} 
    </style>