bootstrap表單中不需要bootstrap btn-group？

好吧，我正在玩一個表單中的按鈕，我想創建一個帶有問題的表單作爲標籤和問題前面的3個單選按鈕（不在下面），我希望按鈕彼此分開（不是全部一起）。我希望能夠將每行內部的單選按鈕分組，以便我可以從每行中選擇一個選項。bootstrap表單中不需要bootstrap btn-group？

事情是這樣的：（但是，如果沒有實際的「（X）」，只是漂亮的BTN）

question:   (x)button   button   button 

question:   button   (x)button   button

所以我寫了這個：

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <!-- The above 2 meta tags *must* come first in the head; any other head content must come *after* these tags --> 

    <title> 
    test 
    </title> 

    <!-- ~~~~~~~~~~~~~~~~~~~~~BOOTSTRAP~~~~~~~~~~~~~~~~~~~~~~~ --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 

    <style type="text/css"> 
    html 
{ 
    font-size: 62.5%; 
} 

body 
{ 
    font-size: 14px; font-size: 1.4rem; 

} 
    </style> 
</head> 
<body> 
    <br/> 
    <br/> 
    <br/> 
<form role="form" class="form-horizontal"> 
       <div class="form-group"> 
        <label for="animal" class="control-label col-md-6"> 
        Which of the following animals best describe you? 
        </label> 
        <!--no nned to add btn-group when inside a form-group--> 
        <div class="col-md-2" data-toggle="buttons"> 
        <label class="btn btn-warning"> 
         <div class="container-fluid" style="width: 7rem;"> 
         <input type="radio" name="animal" id="jaguar"> 
         Jaguar 
         </div> 
         </label> 
        </div> 
        <div class="col-md-2" data-toggle="buttons"> 
        <label class="btn btn-primary"> 
         <div class="container-fluid" style="width: 7rem;"> 
         <input type="radio" name="animal" id="dolphin"> 
         Dolphin 
         </div> 
        </label> 
        </div> 
        <div class="col-md-2" data-toggle="buttons"> 
        <label class="btn btn-danger"> 
         <div class="container-fluid" style="width: 7rem"> 
         <input type="radio" name="animal" id="ant"> 
         Ant 
         </div> 
        </label> 
        </div> 
       </div> 
       <hr/> 
       <div class="form-group"> 
        <label for="romantic" class="control-label col-md-6"> 
        Which of the following escenarios best describe your ideal romatic getaway? 
        </label> 
        <div class="col-md-2" data-toggle="buttons"> 
        <label class="btn btn-success"> 
         <div class="container-fluid" style="width: 7rem;"> 
         <input type="radio" name="romantic" id="forest"> 
         Forest 
         </div> 
        </label> 
        </div> 
        <div class="col-md-2" data-toggle="buttons"> 
        <label class="btn btn-warning"> 
         <div class="container-fluid" style="width: 7rem;"> 
         <input type="radio" name="romantic" id="beach"> 
         Beach 
         </div> 
        </label> 
        </div> 
        <div class="col-md-2" data-toggle="buttons"> 
        <label class="btn btn-info"> 
         <div class="container-fluid" style="width: 7rem;"> 
         <input type="radio" name="romantic" id="house"> 
         House 
         </div> 
        </label> 
        </div> 
       </div> 
       </form> 
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" 
    crossorigin="anonymous"></script> 
    <!-- bootstrap scripts --> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
</body> 
</html>

這是我想要的一切。但是...

我注意到的第一件事情是，當我從第一行選擇第一個選項時顏色變暗，但是當我點擊第二行中的一個按鈕時，第一個選擇再次被清除。這讓我懷疑，是不是第一行的單選按鈕沒有分組並且與第二行分開？

然後在檢查引導程序信息時，我注意到我沒有使用btn組！

...所以我相信自己，我只能從2行中選擇一個無線電選項，而我，明確地說，並不想這樣！

但是，我錯了！當表單內部你不需要btn-group（因爲你已經有了表單組reccon），實際上btn-group使編輯位置和大小變得更加困難。

而且這裏證明它是一些示例代碼，所述方面是非常基本的原因我沒有實際使用BTN顯示器，但它證明，沒有BTN-組徑向按鈕將根據形狀組自動組：

<form role="form" class="form-horizontal"> 
       <div class="form-group"> 
        <label for="animal" class="control-label col-md-6"> 
        Which of the following animals best describe you? 
        </label> 
        <!--Look ma no btn-group anywhere!!!!--> 
        <div class="col-md-2" data-toggle="buttons"> 
        <label class="btn btn-warning"> 
         <div class="container-fluid" style="width: 7rem;"> 
         <input type="radio" name="animal" id="jaguar"> 
         Jaguar 
         </div> 
         </label> 
        </div> 
        <div class="col-md-2" data-toggle="buttons"> 
        <label class="btn btn-primary"> 
         <div class="container-fluid" style="width: 7rem;"> 
         <input type="radio" name="animal" id="dolphin"> 
         Dolphin 
         </div> 
        </label> 
        </div> 
        <div class="col-md-2" data-toggle="buttons"> 
        <label class="btn btn-danger"> 
         <div class="container-fluid" style="width: 7rem"> 
         <input type="radio" name="animal" id="ant"> 
         Ant 
         </div> 
        </label> 
        </div> 
       </div> 
       <hr/> 
       <div class="form-group"> 
        <label for="romantic" class="control-label col-md-6"> 
        Which of the following escenarios best describe your ideal romatic getaway? 
        </label> 
        <div class="col-md-2" data-toggle="buttons"> 
        <label class="btn btn-success"> 
         <div class="container-fluid" style="width: 7rem;"> 
         <input type="radio" name="romantic" id="forest"> 
         Forest 
         </div> 
        </label> 
        </div> 
        <div class="col-md-2" data-toggle="buttons"> 
        <label class="btn btn-warning"> 
         <div class="container-fluid" style="width: 7rem;"> 
         <input type="radio" name="romantic" id="beach"> 
         Beach 
         </div> 
        </label> 
        </div> 
        <div class="col-md-2" data-toggle="buttons"> 
        <label class="btn btn-info"> 
         <div class="container-fluid" style="width: 7rem;"> 
         <input type="radio" name="romantic" id="house"> 
         House 
         </div> 
        </label> 
        </div> 
       </div> 
       </form>

此外，如果我試圖使用btn組，顯示全部搞砸了。我玩了很多這個配置，無法獲得我想要的顯示。以下是使用btn組的示例代碼：

<form role="form" class="form-horizontal"> 
       <div class="form-group"> 
        <label for="animal" class="control-label col-md-6"> 
        Which of the following animals best describe you? 
        </label> 
        <!--no nned to add btn-group when inside a form-group--> 
        <div class="btn-group" data-toggle="buttons"> 
        <div class="col-md-2"> 
        <label class="btn btn-warning"> 
         <div class="container-fluid" style="width: 7rem;"> 
         <input type="radio" name="animal" id="jaguar"> 
         <span syle="width: 7rem;">Jaguar</span> 
         </div> 
         </label> 
        </div> 
        <div class="col-md-2"> 
        <label class="btn btn-primary"> 
         <div class="container-fluid" style="width: 7rem;"> 
         <input type="radio" name="animal" id="dolphin"> 
         Dolphin 
         </div> 
        </label> 
        </div> 
        <div class="col-md-2"> 
        <label class="btn btn-danger"> 
         <div class="container-fluid" style="width: 7rem"> 
         <input type="radio" name="animal" id="ant"> 
         Ant 
         </div> 
        </label> 
        </div> 
        </div> 
       </div> 
       <hr/> 
       <div class="form-group"> 
        <label for="romantic" class="control-label col-md-6"> 
        Which of the following escenarios best describe your ideal romatic getaway? 
        </label> 
        <div class="btn-group" data-toggle="buttons"> 
        <div class="col-md-2"> 
        <label class="btn btn-success"> 
         <div class="container-fluid" style="width: 7rem;"> 
         <input type="radio" name="romantic" id="forest"> 
         Forest 
         </div> 
        </label> 
        </div> 
        <div class="col-md-2"> 
        <label class="btn btn-warning"> 
         <div class="container-fluid" style="width: 7rem;"> 
         <input type="radio" name="romantic" id="beach"> 
         Beach 
         </div> 
        </label> 
        </div> 
        <div class="col-md-2"> 
        <label class="btn btn-info"> 
         <div class="container-fluid" style="width: 7rem;"> 
         <input type="radio" name="romantic" id="house"> 
         House 
         </div> 
        </label> 
        </div> 
        </div> 
       </div> 
       </form>

所以得出結論.... wtf ???我是一個noob，並且絕不能聲稱btn-group在表單內是無用的。事實上，我可能是錯的。但這種事情的顯示混淆了我，我無法找到使用btn-group的正確方法！有我想要的形式的顯示.....

form-group足以分組徑向按鈕？

btn-group實際上在表單內沒有幫助嗎？

有沒有更好的方法將btn包含在表單中，並遵守我描述的線框顯示？

拜託，如果一些有一個答案我希望得到任何迴應

來源

2017-04-17 Tezcatlipoca

說實話，我真正需要的是驗證......我的第一個表單是不正確的（不使用btn組的）？ btn-group真的需要在form-group裏面？ – Tezcatlipoca

看來，除了寬度wasnt足夠的單選按鈕做工精細。所以我改變

<div class="col-md-2">

到

<div class="col-md-4">

注：運行下面的代碼片段，並查看它在全屏模式下

html 
 
{ 
 
    font-size: 62.5%; 
 
} 
 

 
body 
 
{ 
 
    font-size: 14px; font-size: 1.4rem; 
 

 
} 
 

 
input[type=radio]{ 
 
    visibility:hidden; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 

 
<form role="form" class="form-horizontal"> 
 
       <div class="form-group"> 
 
        <label for="animal" class="control-label col-md-6"> 
 
        Which of the following animals best describe you? 
 
        </label> 
 
        <!--no nned to add btn-group when inside a form-group--> 
 
        <div class="btn-group" data-toggle="buttons"> 
 
        <div class="col-md-4"> 
 
        <label class="btn btn-warning"> 
 
         <div class="container-fluid" style="width: 7rem;"> 
 
         <input type="radio" name="animal" id="jaguar"> 
 
         <span syle="width: 7rem;">Jaguar</span> 
 
         </div> 
 
         </label> 
 
        </div> 
 
        <div class="col-md-4"> 
 
        <label class="btn btn-primary"> 
 
         <div class="container-fluid" style="width: 7rem;"> 
 
         <input type="radio" name="animal" id="dolphin"> 
 
         Dolphin 
 
         </div> 
 
        </label> 
 
        </div> 
 
        <div class="col-md-4"> 
 
        <label class="btn btn-danger"> 
 
         <div class="container-fluid" style="width: 7rem"> 
 
         <input type="radio" name="animal" id="ant"> 
 
         Ant 
 
         </div> 
 
        </label> 
 
        </div> 
 
        </div> 
 
       </div> 
 
       <hr/> 
 
       <div class="form-group"> 
 
        <label for="romantic" class="control-label col-md-6"> 
 
        Which of the following escenarios best describe your ideal romatic getaway? 
 
        </label> 
 
        <div class="btn-group" data-toggle="buttons"> 
 
        <div class="col-md-4"> 
 
        <label class="btn btn-success"> 
 
         <div class="container-fluid" style="width: 7rem;"> 
 
         <input type="radio" name="romantic" id="forest"> 
 
         Forest 
 
         </div> 
 
        </label> 
 
        </div> 
 
        <div class="col-md-4"> 
 
        <label class="btn btn-warning"> 
 
         <div class="container-fluid" style="width: 7rem;"> 
 
         <input type="radio" name="romantic" id="beach"> 
 
         Beach 
 
         </div> 
 
        </label> 
 
        </div> 
 
        <div class="col-md-4"> 
 
        <label class="btn btn-info"> 
 
         <div class="container-fluid" style="width: 7rem;"> 
 
         <input type="radio" name="romantic" id="house"> 
 
         House 
 
         </div> 
 
        </label> 
 
        </div> 
 
        </div> 
 
       </div> 
 
       </form>

我想這是你想要的那種顯示。

來源

2017-04-17 20:40:14 lhavCoder

這或多或少是我想要的，但我不希望實際的徑向按鈕（小圓圈）顯示在btn內部。 – Tezcatlipoca

好的。如果你需要除此之外的任何東西。讓我知道 – lhavCoder

說實話，我真正需要的是驗證...是我的第一個表單不正確（不使用btn組的）？ btn-group真的需要在form-group裏面？ – Tezcatlipoca

bootstrap表單中不需要bootstrap btn-group？

回答

相關問題