引导程序:css:html:将引导程序面板放置在页面的右上角

问题描述

我有一个带有一些标签和表单控件的HTML页面以及一个bootstrap 3面板。我想将面板放在页面的右上角。我该怎么办?

.cshtml:

<div>
<form id="MainForm" method="post" asp-controller="Controller" asp-action="Action">

    <div asp-validation-summary="All" class="text-danger"></div>        
    @if (@Model.Item1 != null && @Model.Item1.Length > 0)
    {
        <div class="row">                
            <div class="form-group  pull-left">
                <label class="control-label">Item 1</label>
                <div>
                    <label class="switch">
                        <input class="form-control" asp-for="Item2" onchange="$('#newItem').toggle(); $('#existingItem').toggle()" />
                        <span class="slider round"></span>
                    </label>
                </div>
            </div>
        </div>

        <fieldset id="existingItem">
            <legend>Process using your existing item</legend>
            <div class="form-group">
                <label class="col-md-2 control-label">Existing item</label>
                <div class="col-md-10">                        
                    <label class="text-muted">@Model.Item2.Substring(Model.Item2.Length - 4)</label>
                </div>
            </div>
            <br />
            <input asp-for="Model.Item3" minRange="@MinItem3" maxrange="@maxrange" onkeyup="format_num_different(id)" />
        </fieldset>

        <div id="newItem" hidden="hidden">
            @await Html.PartialAsync("_Item3Partial")
            <div>                    
                @await Html.PartialAsync("_Item4Partial")
            </div>
        </div>
    </form>
</div>
<div class="col-sm-3">    
<div class="panel panel-primary pull-right">
    <div class="panel-heading">
        <h3 class="panel-title"></h3>
    </div>
    <div class="panel-body">
        <p>Blah blah blah.</p>
    </div>        
</div>
</div>

如何使底部面板位于右上角。现在,它位于页面的右下角。 任何帮助表示赞赏。 谢谢

解决方法

我通过以下解决方案解决了这个问题:

<div class="row">
<div class="pull-left">
<form>
----my partial views---
</form>
</div>
<div class="pull-right">
---my panel----
</div>
</div