如何解决如何将您的按钮对齐到右侧而不是引导区中?
我确实需要对div进行绑定的帮助(在我的标签旁边应该是@EditorFor(model => model.CourseName)不在下面。问题是my @ Razor不在我的标签下面。是我的标签;
<div class="row">
<div class="col-xs-3">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Start New Course
</button>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Start New Course</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="form-group row"></div>
<label for="CourseName" class="col-sm-2 col-form-label">CourseName:</label>
<div class="col-sm-8">@Html.EditorFor(model => model.CourseName,new { htmlAttributes = new { @class = "form-control",autofocus = "autofocus",placeholder = "CourseName" } })
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary">Create Course</button>
</div>
</div>
</div>
</div>
</div>
解决方法
您可以使用引导程序类将其向右对齐。
将ml-auto
添加到col-xs-3
或将justify-content-end
添加到row
:
在示例中,我将ml-auto
添加到了该列。
<div class="row">
<div class="col-xs-3 ml-auto">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Start New Course
</button>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Start New Course</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="form-group row"></div>
<label for="CourseName" class="col-sm-2 col-form-label">CourseName:</label>
<div class="col-sm-8">@Html.EditorFor(model => model.CourseName,new { htmlAttributes = new { @class = "form-control",autofocus = "autofocus",placeholder = "CourseName" } })
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary">Create Course</button>
</div>
</div>
</div>
</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。