如何解決col-xs- *中的引導程序輸入組溢出問題？

Question

我試着在這個網站我建立使用輸入組。在col-md- *和col-lg- *中表現正常。但在COL-XS-時*它溢出容器像this

任何人可以幫助我解決這個問題？

的代碼：

<div class="row" style="border:1px solid #c1c1c1"> 
    <form> 
     <div class="form-group col-xs-5 col-md-3" style="padding:8px;"> 
      <label for="dari">blah</label> 
      <input type="date" class="form-control" id="dari"/> 
     </div> 
     <style> 
      @media(min-width: 992px){ 
       .col-md-1.stripe{ 
        width: 1%; 
       } 
      } 
      .col-xs-1.stripe{ 
       width: 1%; 
      } 
     </style> 
     <div class="form-group col-xs-1 col-md-1 stripe" style="margin-top:2em; padding:8px;"> 
      <p><strong>-</strong></p> 
     </div> 
     <div class="col-xs-5 col-md-3" style="padding:8px;"> 
      <label for="sampai">blah</label> 
      <div class="input-group"> 
       <input type="date" class="form-control" id="sampai"/> 
       <span class="input-group-btn"> 
        <button class="btn btn-default"> 
         <i class="glyphicon glyphicon-search"></i> 
         <span>&nbsp Search</span> 
        </button> 
       </span> 
      </div> 
     </div> 
    </form> 
</div> 

Answer 1

下面是一個例子，則可以使用

display: inline-block; 
max-width: 100%; 

使用上input-group解決它..

在實施例I中加入聯樣式上第二輸入組你可以看到你和新的區別。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<div class="row" style="border:1px solid #c1c1c1"> 
 
    <div class="col-xs-7" style="border: 1px solid #ccc;"><div class="row"> 
 
    <form> 
 
     <div class="form-group col-xs-5 col-md-3" style="padding:8px;"> 
 
      <label for="dari">blah</label> 
 
      <input type="date" class="form-control" id="dari"/> 
 
     </div> 
 
     <style> 
 
      @media(min-width: 992px){ 
 
       .col-md-1.stripe{ 
 
        width: 1%; 
 
       } 
 
      } 
 
      .col-xs-1.stripe{ 
 
       width: 1%; 
 
      } 
 
     </style> 
 
     <div class="form-group col-xs-1 col-md-1 stripe" style="margin-top:2em; padding:8px;"> 
 
      <p><strong>-</strong></p> 
 
     </div> 
 
     <div class="col-xs-5 col-md-3" style="padding:8px;"> 
 
      <label for="sampai">blah</label> 
 
      <div class="input-group"> 
 
       <input type="date" class="form-control" id="sampai"/> 
 
       <span class="input-group-btn"> 
 
        <button class="btn btn-default"> 
 
         <i class="glyphicon glyphicon-search"></i> 
 
         <span>&nbsp Search</span> 
 
        </button> 
 
       </span> 
 
      </div> 
 
      
 
      <div class="input-group" style="display: inline-block; max-width: 100%;"> 
 
       <input type="date" class="form-control" id="sampai"/> 
 
       <span class="input-group-btn"> 
 
        <button class="btn btn-default"> 
 
         <i class="glyphicon glyphicon-search"></i> 
 
         <span>&nbsp Search</span> 
 
        </button> 
 
       </span> 
 
      </div> 
 
     </div> 
 
    </form> 
 
    </div></div> 
 
</div>

此外，我會建議你在移動使用col-xs-12較大列，並且hidden-xs爲hidding之間的破折號。