Puis-je avoir un Bootstrap col à l'intérieur d'un autre col?

Je suis encore nouveau pour le "Bootstrap" et je suis à essayer de comprendre ce qui est correct et ce qui ne l'est pas. Est-il acceptable d'avoir un col à l'intérieur d'un col? Dans l'exemple ci-dessous, j'ai un formulaire que je veux pour s'adapter à la moitié de l'écran. Je veux aussi une certaine forme de contrôle des éléments à la moitié de la taille tandis que d'autres de la largeur complète. Serait-ce la bonne façon d'aller à ce sujet ou est-il un meilleur moyen?

Exemple de code:

HTML:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<section class="row">
  <div class="container">
    <div class="col-xs-12 text-center">
      <h1>Contact</h1>
    </div>
    <form class="col-xs-12 col-sm-8 col-sm-offset-2 form-horizontal">
      <div class="form-group form-group-lg">
        <div class="col-sm-12">
          <input class="form-control" type="text" placeholder="name">
        </div>
      </div>
      <div class="form-group form-group-lg">
        <div class="col-xs-6">
          <input class="form-control" type="text" placeholder="email">
        </div>
        <div class="col-xs-6">
          <input class="form-control" type="text" placeholder="website">
        </div>
      </div>
      <button type="submit" class="btn btn-warning btn-lg pull-right col-xs-12">Submit</button>
    </form>
  </div>
</section>