Question

我需要在侧边栏中构建一个面板主体，其中的按钮位于ocuppy 6列内，此刻我有这样的结果：

我希望每个按钮都有8列，而不是目前正在发生的事情。

这是我到目前为止所做的：

  <div class="sidebar">
        <h4>Document</h4>
        <div class="panel-group">
            <div class="panel panel-danger">
                <div class="panel-body">
                    <div class="col-md-6">
                        <button class="btn btn-primary-outline btn-block">
                            <span class="glyphicon glyphicon-share"></span>
                            <br>Paragraph
                        </button>
                    </div>
                    <div class="col-md-6">
                        <button class="btn btn-primary-outline btn-small">
                            <span class="glyphicon glyphicon-share"></span>
                            <br>
                            <span class="fontSize">Image</span>
                        </button>
                    </div>
                    <div class="col-md-6">
                        <button class="btn btn-primary-outline btn-small">
                            <span class="glyphicon glyphicon-share"></span>
                            <br>
                            <span class="fontSize">Image</span>
                        </button>
                    </div>
                    <div class="col-md-6">
                        <button class="btn btn-primary-outline btn-small">
                            <span class="glyphicon glyphicon-share"></span>
                            <br>Heading
                        </button>
                    </div>
                </div>
            </div>
            <div class="panel panel-default">

            </div>
        </div>
    </div>

Answer 1

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
  <div class="sidebar">
        <h4>Document</h4>
        <div class="panel-group">
            <div class="panel panel-danger">
                <div class="panel-body row">
                    <div class="col-md-6">
                        <button class="btn btn-primary-outline btn-block button">
                            <span class="glyphicon glyphicon-share"></span>
                            <br>Paragraph
                        </button>
                    </div>
                    <div class="col-md-6">
                        <button class="btn btn-primary-outline btn-block">
                            <span class="glyphicon glyphicon-share"></span>
                            <br>
                            <span class="fontSize">Image</span>
                        </button>
                    </div>
                    <div class="col-md-6">
                        <button class="btn btn-primary-outline btn-block">
                            <span class="glyphicon glyphicon-share"></span>
                            <br>
                            <span class="fontSize">Image</span>
                        </button>
                    </div>
                    <div class="col-md-6">
                        <button class="btn btn-primary-outline btn-block">
                            <span class="glyphicon glyphicon-share"></span>
                            <br>Heading
                        </button>
                    </div>
                </div>
            </div>
            <div class="panel panel-default">

            </div>
        </div>
    </div>

将所有按钮的类从btm-small更改为btn-block。希望它有所帮助

按钮ocupy 6列面板体内

1 个答案: