Question

当在表中添加一列时，我在表中的按钮正在换行，如下所示：

表格按钮图片：

我的想法是，它们保持水平以减少屏幕上的空间，因此桌子不会发“胖”字。

形式证明书：

<div class="row">
<div class="col-md-4">
    @using (Html.BeginForm("Index", "Clientes", FormMethod.Get))
    {
        <div id="custom-search-input">
            <div class="input-group col-md-12">
                @Html.TextBox("buscar", null, new { @class = "form-control input", @placeholder = "Pesquisar por nome" })
                <span class="input-group-btn">
                    <button class="btn btn-info btn" type="submit">
                        <small><i class="glyphicon glyphicon-search"></i></small>
                    </button>
                </span>
            </div>
        </div>
    }
</div>
<div class="col-md-8 ">
    <div>
        <div class="pull-right">
            <a href="@Url.Action("Create", "Barcos")" data-modal="" class="btn btn-primary">
                <span title="Detalhes" class="glyphicon glyphicon-plus-sign"></span> Novo Barco
            </a>
        </div>
    </div>
</div>

  @if (Model.Any())
 {
<table class="table" >
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.Nome)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Email)
        </th>

        <th>
            @Html.DisplayNameFor(model => model.SapId)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.CapacidadeAgua)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.CapacidadeOleo)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Velocidade)
        </th>

        <th>
            @Html.DisplayNameFor(model => model.Setor)
        </th>
        <th>
            @Html.DisplayName("Classe Embarcação")
        </th>
        <th>
            @Html.DisplayName("Classe Embarcação")
        </th>
        <th> </th>
    </tr>



        @foreach (var item in Model)
    {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.Nome)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Email)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.SapId)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.CapacidadeAgua)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.CapacidadeOleo)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Velocidade)
            </td>

            <td>
                @Html.DisplayFor(modelItem => item.Setor)
            </td>

            <td>
                @Html.DisplayFor(modelItem => item.ClasseDoBarco)
            </td>

            <td>
                @Html.DisplayFor(modelItem => item.TipoDeOperacaoEmbarcacao)
            </td>


            <td align="right">
                <a href="@Url.Action("Edit","Barcos", new { id = item.Id })" class="btn btn-warning" data-modal="">
                    <span title="Editar" class="glyphicon glyphicon-pencil">Editar</span>
                </a>
                @if (User.IsInRole("Administrator"))
                {
                    <a href="@Url.Action("Details","Barcos", new { id = item.Id })" class="btn btn-warning" data-modal="">
                        <span title="Editar" class="glyphicon glyphicon-pencil">Detalhes</span>
                    </a>
                }
                <a href="@Url.Action("Delete","Barcos", new { id = item.Id })" class="btn btn-danger">
                    <span title="Excluir" class="glyphicon glyphicon-trash">Excluir</span>
                </a>
                <a href="@Url.Action("RedirectTo","Barcos", new { id = item.SapId })" class="btn btn-info" target="_blank">
                    <span title="Excluir" class="glyphicon glyphicon-map-marker">Localizar</span>
                </a>
            </td>
        </tr>
    }
</table>
   }

如何将它们水平对齐？

Answer 1

为了使它们适合一行，您必须为此牺牲空间。因此，在html表中，最后一个<th></th>的宽度如下：

<th style='width:300px;'> </th>

以宽度尺寸播放，以使您的按钮排成一行。

对齐表格内的Twitter boostrap按钮

1 个答案: