Question

我是新手学习bootstrap并喜欢它！但是我似乎无法找到一个简单的指南来编辑自定义项目的大量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>

这是当前的实际页面。 enter image description here

如果有人能解释你在哪里插入这段代码/ css，我将永远感激，因为bootstrap.css中的猜测和检查方法无效。哈哈

谢谢！

Answer 1

使用Bootstrap's grid和课程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">
    <!-- ... -->

这是一个小demo。

Answer 2

只需将其添加到您的CSS：

#CreateButton button {
    display: block;
    width: 100%;
}

Answer 3

如果您不想添加任何额外的CSS（它不应该是您不敢做的事情，但正如James的回答评论中所述，它应该在一个单独的文件中），你可以使用bootstrap css文件中存在的类。

嘉莉的回答是缺少一步。您还需要按钮上的“col”类：

<div class="row">
    <div class="col-md-12">
        <button type="button" class="btn btn-success col-md-12" ...>Create</button>
    </div>
</div>

使按钮宽度100％，MVC 5 Bootstrap 3

3 个答案: