Question

我正在使用bootstrap来显示按钮。我想在同一行显示所有按钮。

演示：https://plnkr.co/edit/4mRV3mVJyGGQacrn4EFp?p=preview

<div class="btn-group">
    <label class="btn btn-primary btn-sm" uib-btn-checkbox="ck1">RED    
    </label>
    <label class="btn btn-primary btn-sm" uib-btn-checkbox="ck2">BLUE
    </label>
</div>
<div class="btn-group">
    <label class="btn btn-primary btn-sm" uib-btn-checkbox="mac1">Mac1
    </label>
    <label class="btn btn-primary btn-sm" uib-btn-checkbox="mac2">Mac2
    </label>
    <label class="btn btn-primary btn-sm" uib-btn-checkbox="mac3">Mac3
    </label>
    <button type="button" class="btn btn-primary btn-xs" style="margin: 13px;" ng-click="submit()">SubmitValue</button>
</div>

我尝试将所有按钮放在同一个btn-group内，但在显示RED和BLUE按钮后我想要空格。

Answer 1

删除btn-group。

mybuild

Answer 2

将此添加到按钮

<link data-require="bootstrap-css@*" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />

<div class="btn-group">
  <label class="btn btn-primary btn-sm" uib-btn-checkbox="ck1">RED    
    </label>
  <label class="btn btn-primary btn-sm" uib-btn-checkbox="ck2">BLUE
    </label>
</div>
<div class="btn-group">
  <label class="btn btn-primary btn-sm" uib-btn-checkbox="mac1">Mac1
    </label>
  <label class="btn btn-primary btn-sm" uib-btn-checkbox="mac2">Mac2
    </label>
  <label class="btn btn-primary btn-sm" uib-btn-checkbox="mac3">Mac3
    </label>
</div>
  <button type="button" class="btn btn-primary btn-xs" style="margin: 13px;">SubmitValue</button>

Answer 3

请检查您是否包含bootstrap css。你可以检查一下 Here

Answer 4

我认为这是解决方案

<link data-require="bootstrap-css@*" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />

    <div class="btn-group">
    <label class="btn btn-primary btn-sm" uib-btn-checkbox="ck1">RED</label>
    <label class="btn btn-primary btn-sm" uib-btn-checkbox="ck2">BLUE</label>
</div>
    <div class="btn-group">
    <label class="btn btn-primary btn-sm" uib-btn-checkbox="mac1">Mac1</label>
    <label class="btn btn-primary btn-sm" uib-btn-checkbox="mac2">Mac2</label>
    <label class="btn btn-primary btn-sm" uib-btn-checkbox="mac3">Mac3</label>
</div>
<button type="button" class="btn btn-primary btn-sm" ng-click="submit()">SubmitValue</button>

但如果你想显示更小的按钮，试试这个

<button type="button" class="btn btn-primary btn-xs" style="margin-left: 20px;"ng-click="submit()">SubmitValue</button>

两个btn-group显示在同一行

4 个答案: