2017-10-20 89 views
0

我有一个ASP.NET Core Web应用程序,其中有两个按钮用于启用搜索结果导航。我想弄清楚如何总是显示在左下方的按钮。我怎样才能轻松做到这一点?如何总是显示左下角的按钮(带有Bootstrap的ASP.NET Core)

这是一张图片。 https://i.stack.imgur.com/uyWwE.png

这是代码。

var prevDisabled = !Model.HasPreviousPage ? "disabled" : ""; 
var nextDisabled = !Model.HasNextPage ? "disabled" : ""; 

<a asp-action="Index" 
asp-route-sortOrder="@ViewData["CurrentSort"]" 
asp-route-page="@(Model.PageIndex - 1)" asp-route-currentFilterSearchBy="@ViewData["CurrentFilterSearchBy"]" currentFilterLocation="@ViewData["CurrentFilterLocation"]" 
asp-route-currentFilterItem="@ViewData["CurrentFilterItem"]" 
class="btn btn-default @prevDisabled" style="bottom:0;"> 
Previous 
</a> 
<a asp-action="Index" 
asp-route-sortOrder="@ViewData["CurrentSort"]" 
asp-route-page="@(Model.PageIndex + 1)" 
asp-route-currentFilterSearchBy="@ViewData["CurrentFilterSearchBy"]" 
asp-route-currentFilterLocation="@ViewData["CurrentFilterLocation"]" 
asp-route-currentFilterItem="@ViewData["CurrentFilterItem"]" 
class="btn btn-default @nextDisabled" style="bottom:0;"> 
Next 
</a> 

回答

0

您是否创建了bootstrap网格系统? 您需要将下一个作为样本:

<div class="container"> 
    <div class="row"> 
     <div class="col-1"> 
      <div>CARD</div> 
      <div> 
       <a asp-action="Index" 
        asp-route-sortOrder="@ViewData["CurrentSort"]" 
        asp-route-page="@(Model.PageIndex - 1)" asp-route-currentFilterSearchBy="@ViewData["CurrentFilterSearchBy"]" currentFilterLocation="@ViewData["CurrentFilterLocation"]" 
        asp-route-currentFilterItem="@ViewData["CurrentFilterItem"]" 
        class="btn btn-default @prevDisabled" style="bottom:0;"> 
        Previous 
       </a> 
       <a asp-action="Index" 
        asp-route-sortOrder="@ViewData["CurrentSort"]" 
        asp-route-page="@(Model.PageIndex + 1)" 
        asp-route-currentFilterSearchBy="@ViewData["CurrentFilterSearchBy"]" 
        asp-route-currentFilterLocation="@ViewData["CurrentFilterLocation"]" 
        asp-route-currentFilterItem="@ViewData["CurrentFilterItem"]" 
        class="btn btn-default @nextDisabled" style="bottom:0;"> 
        Next 
       </a> 
      </div> 
     </div> 
     <div class="col-5"> 
      CONTENT 
     </div> 
    </div> 
</div> 
+0

没有正确使用它。 :-)你真棒 - 完美的工作。 –

相关问题