twitter-bootstrap – Position of columns that need to be "collapsed"

Question:

Eu estava querendo colocar duas colunas de conteúdo na mesma row. Porém as duas colunas (col-6) podem ser encolhidas(collapsed), mas quando adiciono a classe “collapse”, elas sao exibidas na vertical. Reproduzi o problema no fiddle: fiddle

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title></title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="robots" content="noindex, nofollow">
  <meta name="googlebot" content="noindex, nofollow">
  <meta name="viewport" content="width=device-width, initial-scale=1">


  <script
    type="text/javascript"
    src="//code.jquery.com/jquery-3.1.1.slim.js"
    
  ></script>

    <link type="text/css" href="/css/result-light.css">

      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
      <script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
      <link type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

  <style id="compiled-css" type="text/css">
      

  </style>


  <!-- TODO: Missing CoffeeScript 2 -->

  <script type="text/javascript">


    window.onload=function(){
      



    }

</script>

</head>
<body>
    <div class="container">
  <div class="row">
    <div class="col-11">
      <form>


        <div class="form-row">
          <div class="collapse col-12" id="myCollapse1">


            <div class="col-6 bg-primary">
              <div class="form-group">
                <label>Name</label>
                <input type="text" class="form-control" value="John">
              </div>
              <div class="form-group">
                <label>Surename</label>
                <input type="text" class="form-control" value="Joseph">
              </div>
            </div>
            <div class="col-6 bg-warning">
              <div class="form-group">
                <label>Email</label>
                <input type="text" class="form-control" value="John@site.com">
              </div>
              <div class="form-group">
                <label>password</label>
                <input type="text" class="form-control" value="jj123">
              </div>
            </div>
          </div>
        </div>
      </form>
    </div>
    <div class="col-1">
      <button class="btn btn-primary" data-toggle="collapse" data-target="#myCollapse1" aria-expanded="false">Collapse</button>

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


  
  <script>
    // tell the embed parent frame the height of the content
    if (window.parent && window.parent.parent){
      window.parent.parent.postMessage(["resultsFrame", {
        height: document.body.getBoundingClientRect().height,
        slug: ""
      }], "*")
    }
  </script>
</body>
</html>

Could anyone help? thanks in advance

Answer:

PROBLEM SOLVED!!!

It lacked a "form-row" after the "collapse" (which is a 12 column), and as it says in the Bootstrap 4 documentation for nested columns:

<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
  <div class="col-8 col-sm-6">
    Level 2: .col-8 .col-sm-6
  </div>
  <div class="col-4 col-sm-6">
    Level 2: .col-4 .col-sm-6
  </div>
</div>

Problem solved, thanks guys!

Scroll to Top