Question

我有一个ASP.NET MVC应用程序，带有控制器操作：

 public class InviteUserController : BaseController
 {
     public ActionResult Index()
     {
        return View();
     }

     [HttpPost]
     public ActionResult Index(InviteUserDetailsViewModel inviteUserDetails)
     {
     }
 }

在视图中：

 @using (Html.BeginForm("Index", "InviteUser", FormMethod.Post, new { @class = "form form-horizontal", role = "form" }))
 {
     <button type="submit" class="btn btn-primary" value="Submit"><i class="fa fa-check"></i> Versturen</button>  
 }

如果单击该按钮，则会正确命中控制器操作方法索引（POST）。

但是，如果我更改按钮以隐藏小屏幕上的按钮文字：

<button type="submit" class="btn btn-primary" value="Submit"><i class="fa fa-check"></i> <span class="hidden-xs">Versturen</span></button>

...如果我点击它，没有任何反应。不调用控制器操作方法。

知道为什么会这样吗？在小屏幕上隐藏按钮文字的替代方法？

Answer 1

您可以使用CSS :after和content: ""作为解决方法 - jsFiddle

<button type="submit" class="btn btn-primary" value="Submit">
    <i id="versturen" class="fa fa-check"></i>
</button> 

#versturen:after {
    content: " Versturen";
}

@media (max-width: 767px) {
  #versturen:after {
    content: "";
  }
}

虽然请记住这不是屏幕阅读器友好...我想你可以在按钮中添加<span class="sr-only">Versturen</span>来解决这个问题。

我想另一条路线是劫持.sr-only类并向其添加媒体查询 - jsFiddle

<button type="submit" class="btn btn-primary" value="Submit">
    <i id="versturen" class="fa fa-check"></i>
    <span class="sr-only-xs"> Versturen</span>
</button>

@media (max-width: 767px) {
  .sr-only-xs {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
  }
}

带按钮的奇怪引导行为

1 个答案: