如何在調整大小時將四個按鈕保持在同一行中？

我想實現一個簡單的瀏覽器遊戲來學習webddevelopment。我有一羣我想代表戰士的div。在這裏，我有一個按鈕組，在「div表」的頭部有4個按鈕。問題是當屏幕變小時，4個按鈕不會顯示在同一行中。另一個問題是按鈕之間有空白，但我希望它們動態地填充整個按鈕組。所以如果有兩個按鈕，那麼他們也應該填寫按鈕組。誰能幫忙？如何在調整大小時將四個按鈕保持在同一行中？

這裏是我的jsfiddle：

.div-TableHeadName { 
 
    padding-top:6px; 
 
    height:35px; 
 
    background-color: darkgrey; 
 
} 
 
.div-TableHeadClass { 
 
    padding-top:6px; 
 
    background-color: darkgrey; 
 
    height:35px; 
 
} 
 
.div-TableBodyImage{ 
 
    height:160px; 
 
    background-color: lightgrey; 
 
} 
 
.div-TableBodyDescription{ 
 
    height: 160px; 
 
    background-color: lightgrey; 
 
} 
 
.btn--actionType{ 
 
    background-color: lightgrey; 
 
    border-radius: 0 !important; 
 
    height: 35px; 
 
    width: 25% 
 
} 
 

 
.btn--actionType:hover{ 
 
    background-color: red; 
 
} 
 
.btn--performAction{ 
 
    background-color: black; 
 
    border-radius: 0 !important; 
 
    color: white; 
 
    height: 35px; 
 
    width: 25% 
 
} 
 
.btn--group{ 
 
    cursor:pointer; 
 
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<body> 
 
    <div class="div-Table"> 
 
    <div class="col-md-2 col-sm-2 col-xs-2 div-TableHeadName"> 
 
     <span>Guldan</span> 
 
    </div> 
 
    <div class="col-md-4 col-sm-4 col-xs-4 div-TableHeadClass"> 
 
     <span>Warrior</span> 
 
    </div> 
 
    <div class="col-md-6 col-sm-6 col-xs-6"> 
 
     <btn-group data-toggle="buttons" class="btn--group"> 
 
     <div class="btn btn--actionType"> 
 
      <label> 
 
      <input type="radio" name="action" value="sword"/>Sword 
 
      </label> 
 
     </div> 
 
     <div class="btn btn--actionType"> 
 
      <label> 
 
      <input type="radio" name="action" value="axe"/>Axe 
 
      </label> 
 
     </div> 
 
     <div class="btn btn--actionType"> 
 
      <label> 
 
      <input type="radio" name="action" value="bow"/>Bow 
 
      </label> 
 
     </div> 
 
     <div type="button" class="btn btn--performAction">Attack 
 
     </div> 
 
     </btn-group> 
 
    </div> 
 
    </div> 
 
    <div style="padding-top:10px" class="col-md-2 col-sm-2 col-xs-2 div-TableBodyImage"> 
 
    <img src="https://upload.wikimedia.org/wikipedia/en/b/b1/Portrait_placeholder.png" width="100"/> 
 
    </div> 
 
    <div style="padding: 10px" class="col-md-10 col-sm-10 col-xs-10 div-TableBodyDescription"> 
 
    <span>This is a description for Guldan, an orc warrior.</span> 
 
    </div> 
 
</body>

來源

2016-10-12 Yalcin

單選按鈕看起來像普通按鈕似乎很不尋常。我不認爲這是一個好的用戶體驗。只是我的觀點。 – orangeh0g

.div-TableHeadName { 
 
    padding-top:6px; 
 
    height:35px; 
 
    background-color: darkgrey; 
 
} 
 
.div-TableHeadClass { 
 
    padding-top:6px; 
 
    background-color: darkgrey; 
 
    height:35px; 
 
} 
 
.div-TableBodyImage{ 
 
    height:160px; 
 
    background-color: lightgrey; 
 
} 
 
.div-TableBodyDescription{ 
 
    height: 160px; 
 
    background-color: lightgrey; 
 
} 
 
.btn--actionType{ 
 
    background-color: lightgrey; 
 
    border-radius: 0 !important; 
 
    height: 35px; 
 
    width: 25%; 
 
    float: left; 
 
} 
 

 
.btn--actionType:hover{ 
 
    background-color: red; 
 
} 
 
.btn--performAction{ 
 
    background-color: black; 
 
    border-radius: 0 !important; 
 
    color: white; 
 
    height: 35px; 
 
    width: 25% 
 
} 
 
.btn--group{ 
 
    cursor:pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<body> 
 
    <div class="div-Table"> 
 
    <div class="col-md-6 col-sm-6 col-xs-6"> 
 
     <btn-group data-toggle="buttons" class="btn--group"> 
 
     <div class="btn btn--actionType"> 
 
      <label> 
 
      <input type="radio" name="action" value="sword"/>Sword 
 
      </label> 
 
     </div> 
 
     <div class="btn btn--actionType"> 
 
      <label> 
 
      <input type="radio" name="action" value="axe"/>Axe 
 
      </label> 
 
     </div> 
 
     <div class="btn btn--actionType"> 
 
      <label> 
 
      <input type="radio" name="action" value="bow"/>Bow 
 
      </label> 
 
     </div> 
 
     <div type="button" class="btn btn--performAction">Attack 
 
     </div> 
 
     </btn-group> 
 
    </div> 
 
    </div>  
 
</body>

有時減少你的問題，只是說事可以幫你解決這個問題的元素。我已經在你看到的代碼中做到了。原來，浮動按鈕，而不是「內聯塊」修復你遇到的兩個問題。內聯塊特別增加了一些空間，浮動不會。此外，這是額外的空間，導致你的25％的按鈕來包裝。

來源

2016-10-12 21:36:10 orangeh0g

如何在調整大小時將四個按鈕保持在同一行中？

回答

相關問題