如何将引导按钮放置在我想要的位置？

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

您可以使用引导程序的类来执行此操作。

您可以添加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>

现场示例在这里。

根据您的评论，为了更精确的控制，您可以使用绝对定位来代替。

你给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>

现场示例在这里。

Answer 2

在 div 标签内创建引导按钮， 您可以在 div 内创建引导按钮并使用对齐。

例子：

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