Bootstrap 4: two btn-group-vertical side by side

Miguel

I have two groups of buttons aligned vertically inside a form. How to force the groups to be side by side?

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>    
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">


    <div class="col-4">
        <form action='{% url "anotar:annotate" next_page_number %}' method="POST" id="post-form">
            {% csrf_token %}
            <input type="hidden" id="tweet_id" name="tweet_id" value="{{tweet_id}}">
            <fieldset>
                <div class="btn-group-vertical btn-group-toggle" data-toggle="buttons">
                  <label class="btn btn-outline-success btn-lg mb-1 rounded">
                    <input type="radio" name="optionsRadios" id="option1" autocomplete="off" value="favor" {%if sentimento == 'favor'%}checked{%endif%}> Positivo
                  </label>
                  <label class="btn btn-outline-success btn-lg mb-1 rounded">
                    <input type="radio" name="optionsRadios" id="option2" autocomplete="off" value="contra" {%if sentimento == 'contra'%}checked{%endif%}> Negativo
                  </label>
                  <label class="btn btn-outline-success btn-lg mb-1 rounded">
                    <input type="radio" name="optionsRadios" id="option3" autocomplete="off" value="neutro" {%if sentimento == 'neutro'%}checked{%endif%}> Neutro
                  </label>
                  <label class="btn btn-outline-success btn-lg mb-2 rounded">
                    <input type="radio" name="optionsRadios" id="option4" autocomplete="off" value="inconclusivo-stance" {%if sentimento == 'inconclusivo-stance'%}checked{%endif%}> Inconclusivo
                  </label>
                </div>
            </fieldset>

            <fieldset>
                <div class="btn-group-vertical btn-group-toggle" data-toggle="buttons">
                  <label class="btn btn-outline-success btn-lg mb-1 rounded">
                    <input type="radio" name="optionsRadios" id="option1" autocomplete="off" value="positivo" {%if sentimento == 'positivo'%}checked{%endif%}> Positivo
                  </label>
                  <label class="btn btn-outline-success btn-lg mb-1 rounded">
                    <input type="radio" name="optionsRadios" id="option2" autocomplete="off" value="negativo" {%if sentimento == 'negativo'%}checked{%endif%}> Negativo
                  </label>
                  <label class="btn btn-outline-success btn-lg mb-1 rounded">
                    <input type="radio" name="optionsRadios" id="option3" autocomplete="off" value="neutro" {%if sentimento == 'neutro'%}checked{%endif%}> Neutro
                  </label>
                  <label class="btn btn-outline-success btn-lg mb-2 rounded">
                    <input type="radio" name="optionsRadios" id="option4" autocomplete="off" value="inconclusivo-senti" {%if sentimento == 'inconclusivo-senti'%}checked{%endif%}> Inconclusivo
                  </label>
                </div>
            </fieldset>
            <br>
            <button type="submit" class="btn btn-primary rounded" >Submit</button>
        </form>
    </div>

Hugo Elhaj-Lahsen

You can use a grid with the fieldsets as columns:

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>    
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

    <div class="container">
    <div class="row">
    <div class="col-12">
        <form action='{% url "anotar:annotate" next_page_number %}' method="POST" id="post-form">
            {% csrf_token %}
            <input type="hidden" id="tweet_id" name="tweet_id" value="{{tweet_id}}">
          <div class="row">
            <fieldset class="col">
                <div class="btn-group-vertical btn-group-toggle" data-toggle="buttons">
                  <label class="btn btn-outline-success btn-lg mb-1 rounded">
                    <input type="radio" name="optionsRadios" id="option1" autocomplete="off" value="favor" {%if sentimento == 'favor'%}checked{%endif%}> Positivo
                  </label>
                  <label class="btn btn-outline-success btn-lg mb-1 rounded">
                    <input type="radio" name="optionsRadios" id="option2" autocomplete="off" value="contra" {%if sentimento == 'contra'%}checked{%endif%}> Negativo
                  </label>
                  <label class="btn btn-outline-success btn-lg mb-1 rounded">
                    <input type="radio" name="optionsRadios" id="option3" autocomplete="off" value="neutro" {%if sentimento == 'neutro'%}checked{%endif%}> Neutro
                  </label>
                  <label class="btn btn-outline-success btn-lg mb-2 rounded">
                    <input type="radio" name="optionsRadios" id="option4" autocomplete="off" value="inconclusivo-stance" {%if sentimento == 'inconclusivo-stance'%}checked{%endif%}> Inconclusivo
                  </label>
                </div>
            </fieldset>

            <fieldset class="col">
                <div class="btn-group-vertical btn-group-toggle" data-toggle="buttons">
                  <label class="btn btn-outline-success btn-lg mb-1 rounded">
                    <input type="radio" name="optionsRadios" id="option1" autocomplete="off" value="positivo" {%if sentimento == 'positivo'%}checked{%endif%}> Positivo
                  </label>
                  <label class="btn btn-outline-success btn-lg mb-1 rounded">
                    <input type="radio" name="optionsRadios" id="option2" autocomplete="off" value="negativo" {%if sentimento == 'negativo'%}checked{%endif%}> Negativo
                  </label>
                  <label class="btn btn-outline-success btn-lg mb-1 rounded">
                    <input type="radio" name="optionsRadios" id="option3" autocomplete="off" value="neutro" {%if sentimento == 'neutro'%}checked{%endif%}> Neutro
                  </label>
                  <label class="btn btn-outline-success btn-lg mb-2 rounded">
                    <input type="radio" name="optionsRadios" id="option4" autocomplete="off" value="inconclusivo-senti" {%if sentimento == 'inconclusivo-senti'%}checked{%endif%}> Inconclusivo
                  </label>
                </div>
            </fieldset>
            </div>
            <br>
            <button type="submit" class="btn btn-primary rounded" >Submit</button>
        </form>
    </div>
</div>
</div>

Este artigo é coletado da Internet.

Se houver alguma infração, entre em [email protected] Delete.

editar em2020-11-25

deixe-me dizer algumas palavras

0comentários

loginDepois de participar da revisão

Postagem anterior:Como são avaliadas as expressões ternárias em Java?

TOP lista

artigo

Bootstrap 4: two btn-group-vertical side by side

Bootstrap 4: two btn-group-vertical side by side

R Shiny: use HTML em funções (como textInput, checkboxGroupInput)

UITextView não está exibindo texto longo

Dependência circular de diálogo personalizado

Acessando relatório de campanhas na AdMob usando a API do Adsense

Como assinar digitalmente um documento PDF com assinatura e texto visíveis usando Java

R Folheto. Dados de pontos de grupo em células para resumir muitos pontos de dados

Setas rotuladas horizontais apontando para uma linha vertical

O Chromium e o Firefox exibem as cores de maneira diferente e não sei qual deles está fazendo certo

Definir um clipe em uma trama nascida no mar

Por que meus intervalos de confiança de 95% da minha regressão multivariada estão sendo plotados como uma linha de loess?

Como dinamizar um Dataframe do pandas em Python?

regex para destacar novos caracteres de linha no início e no fim

Why isn't my C# .Net Core Rest API route finding my method?

Como obter a entrada de trás de diálogo em treeview pyqt5 python 3

Tabela CSS: barra de rolagem para a primeira coluna e largura automática para a coluna restante

How to create dynamic navigation menu select from database using Codeigniter?

Como recuperar parâmetros de entrada usando C #?

Changing long, lat values of Polygon coordinates in python

Livros sobre criptografia do muito básico ao muito avançado

Método \ "POST \" não permitido no framework Django rest com ações extras & ModelViewset

Pesquisa classificada, conte números abaixo do valor desejado