0

Meus botões dentro da tabela estão quebrando a linha quando é adicionado uma coluna na tabela, estão ficando da seguinte forma:

Botões na tabela

Meu código ta da seguinte forma:

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

Como eu faria para alinha-los na horizontal?

EDIT: @Gilmar

table

3 Respostas 3

3

Coloque a classe .btn-group na td onde estão os botões:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<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>
     <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" class="btn-group">
             <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>
                 <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>

Essa classe agrupa os botões na mesma linha.

0

No css adicione

tr{
display:flex;
}
td{
justify-content: center;
justify-items: center;
align-items: center;
align-content: center;
}
2
  • Poderia completar a resposta e colocar um exemplo de como ficaria com esse css. 1/11/2018 às 19:29
  • Opa, fiz o teste, mas não rolou, vou postar uma imagem na pergunta q eu fiz pra mostrar como ficou
    – Jhensen
    1/11/2018 às 19:36
-3

Acho que se tu adicionar um text-align: center; na <td> resolve (pois tu não usa button).

no caso para testes:

<td style="text-align: center;">
                <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>

Caso funcione, adicione na sua classe de CSS e use, ou crie uma para isto.

1
  • Coloquei, mas ficou da mesma forma =/
    – Jhensen
    1/11/2018 às 19:35

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .