左对齐一个按钮并右对齐引导面板中的两个按钮

我有一个面板，面板中有三个按钮。我想让一个按钮位于当前位置（左侧），我希望另外两个按钮位于最右侧。左对齐一个按钮并右对齐引导面板中的两个按钮

当前按钮全部对齐到左侧。以下是我写的代码。我尝试了很多东西，包括拉右，添加按钮组和clearfix，但它们仍然保留最多。

我自己也尝试这个帖子：Left align and right align within div in Bootstrap

我使用bootstrapmin两个CSS和JS。

下面是代码：

<div class="row"> 
     <div class="form-inline"> 
      <div class="col-sm-5" style="width: 100%;"> 
       <div class="panel-group"> 
        <div class="panel panel-primary"> 
         <div class="panel-heading">Click 'Run' to complete the report.</div> 
         <div class="panel-body" style="background-color: lightgray;"> 
          <div class="form-group"> 
           <asp:Button ID="btnRun" runat="server" Text="Run" OnClick="btnRun_Click" 
            class="btn btn-primary btn-sm"/>          
           <div class="btn-group"> 
           <span class="pull-right"> 
            <asp:Button ID="btnReset" runat="server" Text="Reset" class="btn btn-primary btn-sm" /> 
            <asp:Button ID="btnExport" runat="server" Text="Export to CSV" class="btn btn-primary btn-sm" /> 
            </span> 
           </div> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

来源

2015-12-19 The OrangeGoblin

这是我编写和测试的代码，我也对Bootstrap，jsfiddle.net，Google和Stack进行了调查，包括过去一天。我正在请求援助，因为我已经用尽了我的研究。非常感谢您的帮助。 –

道歉，这是https://jsfiddle.net/orangegoblin/j2gtr9k7/ –

因为我有asp按钮，它们在小提琴中重叠，但它们在页面中分开。 –

你在正确的轨道上。你唯一需要做的就是相应地使用引导类。如果你注意，你会看到他们作为一张地图工作。 1.建立一个容器，2.建立一个行，3.建立一个列的大小，4.建立元素，5.找到它。在这种情况下，您必须将左边的按钮换成左边的列，将右边的btn-group换成右边的容器，其中pull-left和pull-right。请注意，在您的@media响应式代码中，您必须取消拉右才能使其在智能手机中看起来不太有趣。我假设你正在构建一个响应式设计，否则你不会使用Bootstrap。 ;）

这里是您的解决方案 enter link description here

附：一codepen避免像鼠疫这样的内联风格。特别是在你有col-sm-5的地方，但是你的宽度要达到100％。这没有任何意义。使用COL-XS-12，如果你想有一个100％的宽度

来源

2015-12-19 17:37:57 LOTUSMS

现在有道理。我误解了按钮组。您还通过使用col-xs-12解决了屏幕较小时的布局问题。我会更好地研究这个。再次感谢。 –

试试这个

<div class="row"> 
      <div class="form-inline"> 
       <div class="col-sm-5" style="width: 100%;"> 
        <div class="panel-group"> 
         <div class="panel panel-primary"> 
          <div class="panel-heading">Click 'Run' to complete the report.</div> 
          <div class="panel-body" style="background-color: lightgray;"> 
           <div class="pull-left"> 
            <asp:Button ID="btnRun" runat="server" Text="Run" 
             class="btn btn-primary btn-sm" /> 
           </div> 
           <div class="pull-right"> 

            <asp:Button ID="btnReset" runat="server" Text="Reset" class="btn btn-primary btn-sm" /> 
            <asp:Button ID="btnExport" runat="server" Text="Export to CSV" class="btn btn-primary btn-sm" /> 

           </div> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div>

来源

2015-12-19 17:26:08 Anabik

感谢您的回应，它几乎在那里，我需要为每个按钮添加两个按钮组，然后拉动对齐。谢谢你的时间。 –

<div class="panel-body" style="background-color: lightgray;"> 
    <div> 
     <asp:Button ID="btnRun" runat="server" Text="Run" OnClick="btnRun_Click" class="btn btn-primary btn-sm" /> 
     <asp:Button ID="btnReset" runat="server" Text="Reset" class="btn btn-primary btn-sm myFloat_Right" /> 
     <asp:Button ID="btnExport" runat="server" Text="Export to CSV" class="btn btn-primary btn-sm myFloat_Right" /> 
    </div> 
</div>

和你的CS文件中添加以下内容：

.myFloat_Right { 
    float: right; 
}

为我工作。

来源

2015-12-19 17:41:27 gadi

左对齐一个按钮并右对齐引导面板中的两个按钮

回答

相关问题