左對齊一個按鈕並右對齊引導面板中的兩個按鈕

我有一個面板，面板中有三個按鈕。我想讓一個按鈕位於當前位置（左側），我希望另外兩個按鈕位於最右側。左對齊一個按鈕並右對齊引導面板中的兩個按鈕

當前按鈕全部對齊到左側。以下是我寫的代碼。我嘗試了很多東西，包括拉右，添加按鈕組和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

左對齊一個按鈕並右對齊引導面板中的兩個按鈕

回答

相關問題