Aligning Twitter boostrap buttons inside a table

Question

My buttons inside the table are breaking the line when a column is added to the table, they are getting as follows:

Table buttons Image:

My idea is that they stay horizontal to take up less space on the screen, so the table does not get "fat" rs

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

How would I do to align them horizontally?

possible duplicate: https://stackoverflow.com/questions/36174328/align-buttons-in-bootstrap — jazb, Nov 02 '18 at 01:55
Possible duplicate of [Align buttons in Bootstrap](https://stackoverflow.com/questions/36174328/align-buttons-in-bootstrap) — Tetsuya Yamamoto, Nov 02 '18 at 02:00

score 0 · Answer 1 · answered Nov 02 '18 at 09:02

0

In order for them to fit in one line you must sacrifice space for it. So, in your html table set width for the last <th></th> as follows:

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

Play with width size to fit your buttons in one line.

answered Nov 02 '18 at 09:02

Zhavat

214
1
6

Ty for the help! I did what you suggested, but the blue "Localizar" button is still on the bottom line. The other 3 fit in the same line – Jhensen Nov 05 '18 at 14:18
Then just increase width from 300 to whatever you need to make all buttons fit as I mentioned in the last line of my answer: "Play with width size to fit your buttons in one line." – Zhavat Nov 06 '18 at 05:59
Yes, I tried this, but above 300px, nothing changes, even increasing. I am using the default layout of the MVC5 – Jhensen Nov 06 '18 at 12:24
Try `min-width` instead of `width`. Or also try considering to use `!important` as follows: `width:400px !important;` – Zhavat Nov 07 '18 at 19:12

Aligning Twitter boostrap buttons inside a table

1 Answers1