Question

我只是想在屏幕的右上角显示我的按钮。我试了很多这样做，Google也是。我也使用了右拉的标签，但无法弄清楚为什么它们没有出现在所需的位置。有帮助吗？这是我的代码：

＆＃13;

@{ ViewBag.Title = "ListCams"; Layout = "~/Views/Shared/_Layout.cshtml"; }
<style>
  div.scroll {
    overflow-y: hidden;
    overflow-x: hidden;
  }
  button {
    background-color: Transparent;
    background-repeat: no-repeat;
    border: none;
    cursor: pointer;
    overflow: hidden;
    outline: none;
  }
</style>
<div class="panel panel-default">
  <div class="panel-heading">
    @*
    <h1 style="color:#F4981F; font-family:'Segoe Marker'">Cams List</h1>*@
    <div class="scroll">
      <form action="/Home/Redirect">
        <div class="btn-group pull-right">
          <button name="button1" value="list" type="submit" class="button" style="width:60px; height:58px; border:none">
            <img src="~/Images/List.png" width="53" height="55" />button2</button>&nbsp&nbsp&nbsp&nbsp
          <button name="button1" value="stream" type="submit" class="button" style="width:60px; height:58px; border:none">
            <img src="~/Images/House.png" width="53" height="55" />button2</button>&nbsp&nbsp&nbsp&nbsp
          <button name="button1" value="setting" type="submit" class="button" style="width:60px; height:58px; border:none">
            <img src="~/Images/Settings.png" width="53" height="55" />button4</button>&nbsp&nbsp&nbsp&nbsp
          <h1 style="color:#F4981F; font-family:'Segoe Marker'">Cams List</h1>
        </div>
      </form>
    </div>
  </div>
</div>

＆＃13;

我也检查了这个链接，它在这里工作正常但是当我运行我的应用程序时，它们出现在标题下方的左上角。

bootply link

Answer 1

<h4>是块元素，就像div一样，它覆盖了所有宽度。

在行内包裹panel-heading div，然后为该div提供12列计算

<强> HTML

<div class="panel-heading row">
    <h4 class="col-xs-9">Panel header</h4>
    <div class="btn-group pull-right col-xs-3">
        <a href="#" class="btn btn-default btn-sm">## Lock</a>
        <a href="#" class="btn btn-default btn-sm">## Delete</a>
        <a href="#" class="btn btn-default btn-sm">## Move</a>
    </div>
</div>

Working solution with your code

Answer 2

添加此css，它将浮动在右侧：

   .pull-right {
          float: right!important;
          margin-top: -66px;
          position: absolute;
          margin-left: 293px;
     }

工作小提琴：http://jsfiddle.net/cpf78jsg/1/

按钮没有出现在右上角

2 个答案: