Question

我正在尝试实现一个简单的浏览器游戏来学习webddevelopment。我有一组div，我想代表一个战士。这里我有一个Button组，在“div table”的头部有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>

Answer 1

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

有时将问题简化为重要的元素可以帮助您解决问题。我在你看到的代码中做到了这一点。事实证明，浮动按钮而不是＆＃34;内联块＆＃34;修复了你遇到的两个问题。内联块特别增加了一些空间，浮动没有。还有一个额外的空间导致你的25％按钮包裹。

如何在调整大小时将四个按钮保持在同一行？

1 个答案: