並排嵌套自舉輸入框

我有兩個輸入框，我試圖並排放在行上，但是我希望盒子之間仍然存在空隙，但要刷到容器的兩側。並排嵌套自舉輸入框

有沒有一種方法只使用Bootstrap來做到這一點？容器是移動設備的複製。

<div class="group col-sm-12"> 
    <div class="row"> 
     <div class="col-sm-6"> 
      <div class="row"> 
       <input type="text" name="first-name" ng-model="user.firstname" /> 
      </div> 
     </div> 
     <div class="col-sm-6"> 
      <div class="row"> 
       <input type="text" name="last-name" ng-model="user.surname" /> 
      </div> 
     </div> 
    </div> 
</div>

plunkr example

來源

2015-04-29 ngplayground

創建您自己的類，刪除填充並應用到您的'col-sm-6'。另外，刪除內部'.row' div。此鏈接提供了一些不同的解決方案https://scotch.io/bar-talk/bootstrap-3-tips-and-tricks-you-still-might-not-know#optionally-remove-the-gutter-padding-from - 列 – Morpheus

確實需要一個在另一個之上的盒子之間的空間？ – shadab

我不熟悉的引導，但一個方法去實現它。將它添加到您的CSS：

.col-sm-6, .col-sm-6 .row, .col-sm-6 .row input { 
    display: inline-block; 
}

來源

2015-04-29 17:54:57 TylerH

這並不理想，這些類將在引導頁面中重複使用，並且覆蓋它們可能會導致頁面上其他部分出現問題。 –

@VladBardalez這可能是真的;然而，在OP的問題/ Plunkr中沒有更多的代碼，我不能安全地假設這個CSS會修改任何衝突的代碼。 – TylerH

引導有幾個不同的網格類。 col-<size>-<num>其中<size>可以是xs,sm,md或lg和<num>可以是（幷包括）1-12之間的整數。

對於移動設備，您需要使用xs。如果您不指定任何較大的尺寸，則它們將使用與較小尺寸相同的寬度。如果您將col-sm-12更改爲col-xs-12和col-sm-6至col-xs-6我想您會得到您要查找的結果。

它也可以幫助你的輸入看起來更一致和更容易爲主題，如果你給他們的form-control類。

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="group col-xs-12"> 
 
    <div class="row"> 
 
     <div class="col-xs-6"> 
 
      <div class="row"> 
 
       <input class="form-control" type="text" name="first-name" /> 
 
      </div> 
 
     </div> 
 
     <div class="col-xs-6"> 
 
      <div class="row"> 
 
       <input class="form-control" type="text" name="last-name" /> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

來源

2015-04-29 17:56:29 redbmk

我不知道我是否正確地理解你的問題。您需要在文本框之間保留一個空格嗎？如果是這樣的話試試這個代碼您也可以在網格之間使用col-xs-offset-1。這將允許你推1格。示例http://www.bootply.com/U6vlrIktq2

  <div class="col-md-4"> 
      <input type="text" class="form-control"> 
      </div> 
      <div class="col-md-4 "> 
      <input type="text" class="form-control"><br> 
     </div> 
<!-- for more spacing between boxes--> 
     <div class="col-xs-5"> 
      <input type="text" class="form-control"> 
     </div> 
    <div class="col-xs-5 col-xs-offset-1"> 
     <input type="text" class="form-control"> 

     </div>

來源

2015-04-29 18:05:02 shadab

並排嵌套自舉輸入框

回答

相關問題