My buttons inside the table are breaking the line when a column is added to the table, they are getting like this:
Mycodeisasfollows:
<divclass="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?
EDIT: @Gilmar