Html 表中并排的引导按钮

我有一个问题，使按钮在桌子上并排。我尝试了

表格响应

，但没有成功。我真的希望你能帮助我。 这是我的密码。根据我的理解，

table responsive

或

table-table-bordered-table-hover

来自

Bootstrap

。只要我把它链接到我的

index.html

，应该就可以了。 但是现在我的输出不是我想要的

对不起，我的英语不好

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

PPMID
EPRID
发布ID
项目名称
发布名称
应用程序名称
行动
{{item.PMID}
{{item.EPRID}
{{item.Releaseid}
{{item.projectname}
{{item.releasename}}
{{item.appname}

您的代码没有问题。它很好用<代码>并排按钮

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

现场演示

片段示例

/*作为外部资源包含最新编译和缩小的CSS*/
/*可选主题*/
@导入url（'//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap theme.min.css'）；
身体{
利润率：10px；
}

PPMID
EPRID
发布ID
项目名称
发布名称
应用程序名称
行动
{{item.PMID}
{{item.EPRID}
{{item.Releaseid}
{{item.projectname}
{{item.releasename}}
{{item.appname}

我认为

没有足够的宽度来容纳按钮，使它们并排

两种解决方案：

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

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

或者为
提供足够的固定宽度是的，我的代码可以正常工作，因为我已经在索引中链接了。但正如您在JSFIDLE中的演示所示，这是可行的。我不知道在CSS中添加什么