使按钮宽度100%,MVC 5 Bootstrap 3

Question

我是新手学习训练和爱它!但是我似乎找不到一个简单的指南来编辑自定义项目的大量bootstrap.css,例如按钮.

我想要做的是扩展我的"创建",以便它填充它当前所在的整个表行.

• 供参考:我的所有模型,控制器和视图都是自动生成的,这是一个索引页面

我的编辑视图的代码,我正在尝试使创建按钮位于表顶部的顶部100%.

@model IEnumerable<WebApplication2.Entities.Employee>

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<br />
<br />
<br />
<br />
<div class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title">Employees</h3>
    </div>

        <div class="btn-group btn-group-lg" id="CreateButton">
            <button type="button" class="btn btn-success" onclick="location.href='@Url.Action("Create")';return false;">Create</button>
        </div>


    <table class="table">
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.Name)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Birthday)
            </th>
            <th></th>
        </tr>

        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.Name)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Birthday)
                </td>
                <td>

                    @Html.ActionLink("Edit", "Edit", new { id = item.ID }) |
                    @Html.ActionLink("Details", "Details", new { id = item.ID }) |
                    @Html.ActionLink("Delete", "Delete", new { id = item.ID })
                </td>
            </tr>
        }

    </table>
</div>

这是当前的实际页面.

如果有人能解释你在哪里插入这个代码/ css我会永远感激,因为我的猜测和检查方法bootstrap.css是行不通的.哈哈

谢谢!

Answer 1

这可以使用Bootstrap的网格和类没有额外的风格来完成btn-block.

<div class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title">Employees</h3>
    </div>

    <div class="row">
        <div class="col-xs-12">
            <button type="button" class="btn btn-success btn-block" onclick="location.href='@Url.Action("Create")';return false;">Create</button>
        </div>
    </div>

    <table class="table">
    <!-- ... -->

这是一个小型演示.