Слева выровняйте одну кнопку и вправо выровняйте две кнопки в панели Bootstrap

У меня есть панель с тремя кнопками в корпусе панели. Я хочу, чтобы одна кнопка была там, где она сейчас (слева), и я хочу, чтобы две другие кнопки находились справа.Слева выровняйте одну кнопку и вправо выровняйте две кнопки в панели Bootstrap

Кнопки в настоящее время выровнены влево. Ниже приведен код, который я написал. Я пробовал множество вещей, включая pull-right и добавление групп кнопок и 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 - в правом контейнере с pull-left и pull-right. Имейте в виду, что в вашем ответном коде @media вы должны свести на нет выпрямление, чтобы они не выглядели забавно в смартфоне. Я предполагаю, что вы строите отзывчивый дизайн, иначе вы бы не использовали Bootstrap. ;)

Вот codepen для решения enter link description here

P.S. Избегайте встроенных стилей, таких как чума. Специально, когда у вас есть col-sm-5, но вы вынуждаете ширину до 100%. Не имеет никакого смысла это делать. Используйте Col-хз-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

Слева выровняйте одну кнопку и вправо выровняйте две кнопки в панели Bootstrap

ответ

Смежные вопросы