表中并排的引导按钮[重复]

Question

我无法将表格中的按钮并排放置。我试过table-responsive，但没用。我真的希望你能帮助我。 这是我的代码。根据我的理解，table-responsive 或table table-bordered table-hover 来自Bootstrap。只要我把它链接到我的index.html，应该没问题。 但现在我的输出不是我想要的。 The button that I have circle should be side by side

P/S：对不起我的英语。

  <div class=" table-responsive">
    <table class="table table-bordered table-hover">
        <thead>
            <tr>
                <th>PPMID</th>
                <th>EPRID</th>
                <th>Release ID</th>
                <th>Project Name</th>
                <th>Release Name</th>
                <th>Application Name</th>
                <th>Action</th>
            </tr>
            <tr>
                <th>
                    <input class="form-control" id="ppmid" type="number" min="1" placeholder="PPMID">
                </th>
                <th>
                    <input class="form-control" id="eprid" type="number" min="1" placeholder="EPRID">
                </th>
                <th>
                    <input class="form-control" id="releaseid" type="text" placeholder="Release ID">
                </th>
                <th>
                    <input class="form-control" id="projectname" type="text" placeholder="Project Name">
                </th>
                <th>
                    <input class="form-control" id="releasename" type="text" placeholder="Release Name">
                </th>
                <th>
                    <input class="form-control" id="applicationname" type="text" placeholder="Application Name">
                </th>
                <th>

                    <button class="btn btn-primary">
                        <span class="glyphicon glyphicon-plus"></span>                      
                    </button> 
                </th>  
            </tr>
        </thead>
        <tbody>

            <tr ng-repeat="item in filteredlist |  filter:searchText"><!--false for ascending, true for descnding-->
            <td>{{item.PMID}}</td>
            <td>{{item.EPRID}}</td>
            <td>{{item.Releaseid}}</td>
            <td>{{item.projectname}}</td>
            <td>{{item.releasename}}</td>
            <td>{{item.appname}}</td>
            <td>

                <button type="button" class="btn btn-default">
                    <span class="glyphicon glyphicon-edit"></span>
                </button>
                <button type="button" class="btn btn-danger">
                    <span class="glyphicon glyphicon-trash"></span>
                </button>
            </td>
             </tr>
        </tbody>
    </table>


</div>

Answer 1

您的代码没有问题。它工作得很好。 Button side by side

也许您应该尝试检查您的浏览器是否处于放大模式或检查分辨率是否正确。

现场演示 Here

片段示例

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

body {
    margin: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class=" table-responsive">
    <table class="table table-bordered table-hover">
        <thead>
            <tr>
                <th>PPMID</th>
                <th>EPRID</th>
                <th>Release ID</th>
                <th>Project Name</th>
                <th>Release Name</th>
                <th>Application Name</th>
                <th>Action</th>
            </tr>
            <tr>
                <th>
                    <input class="form-control" id="ppmid" type="number" min="1" placeholder="PPMID">
                </th>
                <th>
                    <input class="form-control" id="eprid" type="number" min="1" placeholder="EPRID">
                </th>
                <th>
                    <input class="form-control" id="releaseid" type="text" placeholder="Release ID">
                </th>
                <th>
                    <input class="form-control" id="projectname" type="text" placeholder="Project Name">
                </th>
                <th>
                    <input class="form-control" id="releasename" type="text" placeholder="Release Name">
                </th>
                <th>
                    <input class="form-control" id="applicationname" type="text" placeholder="Application Name">
                </th>
                <th>

                    <button class="btn btn-primary">
                        <span class="glyphicon glyphicon-plus"></span>                      
                    </button> 
                </th>  
            </tr>
        </thead>
        <tbody>

            <tr ng-repeat="item in filteredlist |  filter:searchText"><!--false for ascending, true for descnding-->
            <td>{{item.PMID}}</td>
            <td>{{item.EPRID}}</td>
            <td>{{item.Releaseid}}</td>
            <td>{{item.projectname}}</td>
            <td>{{item.releasename}}</td>
            <td>{{item.appname}}</td>
            <td>

                <button type="button" class="btn btn-default">
                    <span class="glyphicon glyphicon-edit"></span>
                </button>
                <button type="button" class="btn btn-danger">
                    <span class="glyphicon glyphicon-trash"></span>
                </button>
            </td>
             </tr>
        </tbody>
    </table>


</div>

Answer 2

我认为<td> 没有足够的宽度让按钮使它们成为side-by-side。

两种解决方案：

.side-by-side {
  display: -webkit-flex;
  display: flex;
  flex-wrap: nowrap; // force buttons not line-break 
}

为容器 <td> 添加此 CSS。 （顺便说一句，flex 是 CSS3 属性，请检查浏览器支持 here）

或为<td> 提供足够的固定宽度。