Split form with radios in 2 columns

Question

I have the following form:

 <?php  
echo"<form class='form-horizontal' method='POST' action='reposicao.php'>"; 
  echo"<fieldset>";
    echo"<legend>OPÇÕES</legend>";
  echo"<input type='hidden' name='loja'     id='loja'     value='$v_loja'>";

  $query_menu = mysql_query("SELECT 
  rm_id     AS FUNCAO,
  rm_desc   AS DESCRICAO,
  rm_obs    AS OBSERVACAO,
  rm_status AS STATUS 
       FROM radios_menu 
            WHERE rm_status='0'");
    while ($row = mysql_fetch_array($query_menu)) {
    $v_funcao    = $row["FUNCAO"];
    $v_desc      = $row["DESCRICAO"];
    $v_obs       = $row["OBSERVACAO"];
    $v_status    = $row["STATUS"];
    echo"<div class='form-group'>";
      echo"<label class='col-lg-2 control-label'></label>";
      echo"<div class='col-lg-10'>";
        echo"<div class='radio'>";
          echo"<label>";
            echo"<input type='radio' name='v_desc' id='$v_funcao' value='$v_funcao' >$v_desc </label></br>";
        echo"</div>";
      echo"</div>";
    echo"</div>";
           }
     echo"<input type='hidden' name='v_descricao'     id='$v_desc'     value='$v_desc '>";
     echo"<br />";
     echo"<br />";
    echo"<div class='form-group'>";
      echo"<div class='col-lg-10 col-lg-offset-2'>";
        echo"<button type='submit' class='btn btn-primary'>CONSULTAR</button>";
      echo"</div>";
    echo"</div>";

  echo"</fieldset>";
 echo"</form>";
?>

It lists several radios, only ta listing everything below each other as could do to list 2 columns ?

Answer 1

To list side by side you would have to set a width because the div comes by default with 100% width, thus occupying all the space and passing to the next line.

As the div which lies the radios is defined with col-lg-10, ie this using 10, to make two columns you must set for each div within this col-lg-5, as answered by @Davi Sousa.

I passed your code with this and some other changes to make the code cleaner, follows:

<?php 

echo "
<form class='form-horizontal' method='POST' action='reposicao.php'> 
  <fieldset>
    <legend>OPÇÕES</legend>
      <input type='hidden' name='loja' id='loja' value='$v_loja'>";

        $query_menu = mysql_query("SELECT 
          rm_id     AS FUNCAO,
          rm_desc   AS DESCRICAO,
          rm_obs    AS OBSERVACAO,
          rm_status AS STATUS 
        FROM radios_menu 
        WHERE rm_status='0'");

        while ($row = mysql_fetch_array($query_menu)):
          $v_funcao    = $row["FUNCAO"];
          $v_desc      = $row["DESCRICAO"];
          $v_obs       = $row["OBSERVACAO"];
          $v_status    = $row["STATUS"];

           echo "
           <div class='form-group'>
             <label class='col-lg-2 control-label'></label>
               <div class='col-lg-10'>
               // Aqui vai a classe
                 <div class='radio col-lg-5'>
                   <label>
                     <input type='radio' name='v_desc' id='$v_funcao' value='$v_funcao' >$v_desc 
                   </label>
                   </br>
                 </div> 
               </div>
             </div>";

         endwhile;

         echo "
         <input type='hidden' name='v_descricao' id='$v_desc' value='$v_desc '>
         <br />
         <br />
         <div class='form-group'>
           <div class='col-lg-10 col-lg-offset-2'>
             <button type='submit' class='btn btn-primary'>CONSULTAR</button>
           </div>
         </div>
       </fieldset>
     </form>";

?>

Remembering that I changed the code to be more readable, since it is not necessary to have so many echo, but it is not a necessary change, it will from you.

I hope I’ve helped;

Att;

Answer 2

Define a width for your div radio and put a float: left.

Answer 3

 echo"<div class='radio'>";
      echo"<label>";
        echo"<input type='radio' name='v_desc' id='$v_funcao' value='$v_funcao' >$v_desc </label></br>";
    echo"</div>";

CHANGE TO

 echo"<div class='radio col-lg-5'>";
      echo"<label>";
        echo"<input type='radio' name='v_desc' id='$v_funcao' value='$v_funcao' >$v_desc </label></br>";
    echo"</div>";