时间戳

首页 > 解决方案 > 如何使用引导程序将 div 向右对齐？

html - 如何使用引导程序将 div 向右对齐？

问题描述

我有一个 layout_cshtml，现在我的挑战是在我的 div 上对齐它在左边并且没有很好地显示搜索和下拉列表。我在下面需要一些帮助，它的逻辑没有很好地对齐，但它对用户体验不利，包括我的导航根本没有向界面显示，根本没有错误，请根据我的尝试帮助我。

//View
<nav>
        <ul class="nav">
            <li><a href="@Url.Action("People")">People</a></li>
            <li><a href="@Url.Action("Modules")">Modules</a></li>
            <li>
                <a href="@Url.Action("Files")"></a>
                <ul class="sub-menu">
                    <li><a href="@Url.Action("Files")">Files</a></li>
                    
                </ul>
            </li>
        </ul>
    </nav>



    <center>
        <div class="form-group row">
            <li class="static ui-state-default ui-corner-top ui-tabs-active ui-state-active" role="tab" tabindex="0" aria-controls="tab-0" aria-labelledby="ui-id-1" aria-selected="true">
                <a href="#tab-0" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-1">Everyone</a>
            </li>
            <form class="form-group ml-3">
                <div class="input-group input-group-sm">
                    <input class="form-control form-control-navbar" type="search" placeholder="Search" aria-label="Search">
                    <div class="input-group-append">
                        <button class="btn btn-navbar" type="submit">
                            <i class="fas fa-search"></i>
                        </button>
                    </div>
                </div>
            </form>
            <!--DropdownlistFor-->
            @Html.DropDownList("eNtsaRegLists", new SelectList(ViewBag.eNtsaRegListsEnum, "Value", "Text"))
        </div>
    </center>

标签： htmlcssasp.net-mvcbootstrap-4

解决方案

我不确定你想移动什么，当你没有那里时<div>，我不明白添加的意义。<nav>div

无论如何，这是一个关于如何做到这一点的例子。我在引导程序中使用了浮点类（https://getbootstrap.com/docs/4.0/utilities/float/）

  <div class="form-group row float-right">
    <li class="static ui-state-default ui-corner-top ui-tabs-active ui-state-active" role="tab" tabindex="0" aria-controls="tab-0" aria-labelledby="ui-id-1" aria-selected="true">
      <a href="#tab-0" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-1">Everyone</a>
    </li>
    <form class="form-group ml-3">
      <div class="input-group input-group-sm">
        <input class="form-control form-control-navbar" type="search" placeholder="Search" aria-label="Search">
        <div class="input-group-append">
          <button class="btn btn-navbar" type="submit">
            <i class="fas fa-search"></i>
          </button>
        </div>
      </div>
    </form>

  </div>

代码笔：https://codepen.io/cbrown___/pen/yLOqNym

顺便说一句，您应该制作代码笔，而不是您需要帮助的我们。

编辑：删除<center>

推荐阅读