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

您的代码没有问题。它工作得很好。 findInCustomersByName(@Param("trader") Trader trader, @Param("name") String name)

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

现场演示 Here

代码段示例

Button side by side

/* 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;
}

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>提供足够的固定宽度。

引导按钮并排在表中

2 个答案: