Html 如何将引导按钮放置在我想要的位置？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35728915/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to position bootstrap buttons where I want?
提问by Shoplifter20
Inside this code
这段代码里面
<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>
I have my bootstrapbutton created. The problem here is that it is positioned on the bottom left of my div. I want to put it on the top-right/center of the div, aligned with my title (h1). How do I position it where I want it? I'm new to bootstrapso I do not know about these workarounds. Thank you.
我已经bootstrap创建了我的按钮。这里的问题是它位于我的 div 的左下角。我想把它放在 div 的右上角/中心，与我的标题 ( h1)对齐。我如何将它放置在我想要的位置？我是新手，bootstrap所以我不知道这些解决方法。谢谢你。
回答by Marcelo
You can use bootstrap's classes to do this.
您可以使用引导程序的类来执行此操作。
You can add pull-rightclass to float the button to the right.
您可以添加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>Live example here.
现场示例在这里。
As per your comments, for more precise control you can do this with absolute positioning instead.
根据您的评论，为了更精确的控制，您可以使用绝对定位来代替。
You give the contentelement relative positioning and give the buttonabsolute positioning. You can then use any combination of the top, right, bottom, and leftproperties to place it where you would like.
你给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>Live example here.
现场示例在这里。
回答by Sasmitha Dasanayaka
Making the bootstrap-button inside a div tagyou can create the bootstrap button inside a div and use align.
在 div 标签内制作引导按钮，您可以在 div 内创建引导按钮并使用对齐。
Example:
例子：
<div style="width:350px;" align="center">
<button type="button" class="btn btn-primary" >edit profile picture</button>
</div>
