如何定位我想要的自举按钮？

Question

在此代码中

<div class="content">
    <h1>TraceMySteps</h1>
       <div>
            <div range-slider
                 floor="0"
                 ceiling="19"
                 dragstop="true"
                 ng-model-low="lowerValue"
                 ng-model-high="upperValue"></div>
        </div>
    <button type="button" class="btn btn-primary" id="right-panel-link" href="#right-panel">Visualizations Panel</button>
</div>

我创建了bootstrap按钮。这里的问题是它位于我div的左下角。我想把它放在div的右上角/中心，与我的标题（h1）对齐。我如何将其定位在我想要的位置？我是bootstrap的新手，所以我不知道这些变通办法。谢谢。

Answer 1

您可以使用bootstrap的类来执行此操作。

您可以添加pull-right类以将按钮浮动到右侧。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="content">
  <button type="button" class="btn btn-primary pull-right" id="right-panel-link" href="#right-panel">Visualizations Panel</button>
  <h1>TraceMySteps</h1>
  <div>
    <div range-slider floor="0" ceiling="19" dragstop="true" ng-model-low="lowerValue" ng-model-high="upperValue"></div>
  </div>
</div>

直播示例here。

根据您的评论，为了更精确的控制，您可以使用绝对定位来完成此操作。

您为content元素提供相对定位并给出button绝对定位。然后，您可以使用top，right，bottom和left属性的任意组合将其放置在您想要的位置。

.content {
  position: relative;
}
#right-panel-link {
  position: absolute;
  top: 0;
  right: 0;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="content">
  <h1>TraceMySteps</h1>
  <div>
    <div range-slider floor="0" ceiling="19" dragstop="true" ng-model-low="lowerValue" ng-model-high="upperValue"></div>
  </div>
  <button type="button" class="btn btn-primary" id="right-panel-link" href="#right-panel">Visualizations Panel</button>
</div>

直播示例here。

Answer 2

在div标签中添加引导按钮 您可以在div中创建引导按钮并使用align。

示例：

<div style="width:350px;" align="center">
    <button type="button" class="btn btn-primary" >edit profile picture</button>
</div>