Question

我有一个27英寸的屏幕，屏幕尺寸为1/2-2/3，一切看起来都很好。讲师字段的中心是两侧都带有成比例的填充（大约1英寸），还有“课程”复选框和课程位于3列表格中（尽管太窄而无法容纳课程）。当我将页面宽度增加到屏幕的2/3以上时，“讲师”字段将缩小到其原始大小的大约1/3，并保持对齐状态。除了“ 1045演算单元”之外，其他复选框和课程都被堆叠，该单元可能仍然合适，因为它的大小。

2/3屏幕页面宽度：X =复选框。

X 1045 Calculus     X 1050 Chemistry   X 2021 Composition
X 2042 Literature   X 3141 TrigonometryX 4022 Microeconomics
X 4041 Macroeconomics

大于2/3的屏幕页面宽度如下所示：文本框缩小到大约1/3以上。

X 1045 Calculus    X 1050       X 2021
                   Chemistry    Composition
X 2042 Literature  X 3141       X 4022
                   Trigonometry Microeconomics
X 4041
Macroeconomics

为什么会这样？我尝试了各种bootstrap col-md设置，但直到增加2/3屏幕大小，然后一切都变了，我才能改变列的宽度。除此之外，该应用程序可以正常运行。我是引导代码和剃须刀页面的新手，希望能获得一些帮助。预先感谢

添加了更正的代码。请注意第二行，我将数字从“ col-md-4”更改为“ col-md-10”。我最初更改了表单组中复选框的“ col”定义，并且应该意识到整个页面都受到了影响。

<div class="row">
<div class="col-md-10">
    <form method="post">
        <div asp-validation-summary="ModelOnly" class="text-danger"></div>
        <input type="hidden" asp-for="Instructor.ID" />
        <div class="form-group">
            <label asp-for="Instructor.LastName" class="control-label"></label>
            <input asp-for="Instructor.LastName" class="form-control" />
            <span asp-validation-for="Instructor.LastName" class="text-danger"></span>
        </div>
        <div class="form-group">
            <label asp-for="Instructor.FirstMidName" class="control-label"></label>
            <input asp-for="Instructor.FirstMidName" class="form-control" />
            <span asp-validation-for="Instructor.FirstMidName" class="text-danger"></span>
        </div>
        <div class="form-group">
            <label asp-for="Instructor.HireDate" class="control-label"></label>
            <input asp-for="Instructor.HireDate" class="form-control" />
            <span asp-validation-for="Instructor.HireDate" class="text-danger"></span>
        </div>
        <div class="form-group">
            <label asp-for="Instructor.OfficeAssignment.Location" 
                class="control-label"></label>
            <input asp-for="Instructor.OfficeAssignment.Location"
                class="form-control" />
            <span asp-validation-for="Instructor.OfficeAssignment.Location"
                class="text-danger" />
        </div>
        <div class="form-group">
            <div class="col-md-offset-1 col-md-12">
                <table>
                    <tr>
                        @{
                            int cnt = 0;

                            foreach (var course in Model.AssignedCourseDataList)
                            {
                                if (cnt++ % 3 == 0)
                                {
                                    @:</tr><tr> </tr><tr>
                                }
                                @:<td>
                                    <input type="checkbox"
                                           name="selectedCourses"
                                           value="@course.CourseID"
                                           @(Html.Raw(course.Assigned ? "checked=\"checked\"" : "")) />
                                           @course.CourseID @:  @course.Title
                                @:</td>
                            }
                                         @:</tr>
                        }
                </table>
            </div>
        </div>
        <div class="form-group">
            <input type="submit" value="Save" class="btn btn-default" />
        </div>
    </form>
</div>

孔托索大学

0 个答案: