bootstrap表格中是否不需要bootstrap btn-group？

Question

Ok so... I was playing with buttons inside of a form, and I wanted to create a form with a question as a label and 3 radio buttons in front of the question (not below), and I wanted the buttons to be separeted from one another (not all together). 好的，我正在玩一个表单内的按钮，我想创建一个带有问题作为标签的表单，并在该问题的前面创建3个单选按钮（不位于下方），并且我想将按钮分开彼此（不是全部）。 and I wanted to be able to group the radio buttons inside of each row so that I'm able to choose one option from each row. 我希望能够将每一行中的单选按钮分组，以便能够从每一行中选择一个选项。

Something like this: (But without the actual "(x)", just the nice btn ) 像这样的东西：（但没有实际的“（x）”，只有漂亮的btn）

question:           (x)button           button           button

question:           button           (x)button           button

And so I wrote this: 所以我这样写：

 <!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>

Which was everything I wanted. 这就是我想要的一切。 But... 但...

The first thing I notice though was that the color darken when I cliked on the first choice from the first row but when I clicked on a button from the second row the first choice cleared again. 但是，我注意到的第一件事是，当我喜欢第一行中的第一个选择时，颜色变暗，但是当我单击第二行中的按钮时，第一个选择又被清除了。 That made me doubt, could it be that the radio buttons from the first row are not grouped and separeted from the second row?? 这使我感到怀疑，是不是第一行中的单选按钮没有分组并与第二行分开吗？

And then while reviewing bootstrap info I notice I didn't used btn-group!! 然后在查看引导信息时，我注意到我没有使用btn-group！

... So I convinced myself that I could only choose one radio option from the 2 rows and I, definetly, didn't want that!!!!! ...所以我说服自己，我只能从两行中选择一个无线电选项，而我绝对不想要那个！！！

But oh I was so wrong!! 但是，哦，我错了！ When inside of a form you don't need btn-group (cause you've got form-group I reccon) and actually btn-group makes it more difficult to edit positions and sizes. 在表单内部时，您不需要btn-group（因为您有我正在接收的表单组），而实际上btn-group使得编辑位置和大小变得更加困难。

And to prove it here is some sample code, the aspect is very basic cause I'm not actually using btn display but it proves that without btn-group radial buttons will automatically group according to form-group: 为了证明这是一些示例代码，该方面是非常基本的原因，因为我实际上并未使用btn display，但它证明了没有btn-group的情况下，径向按钮会根据form-group自动进行分组：

<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>

Further more if I tried to use btn-group, the display got all messed up. 更进一步，如果我尝试使用btn-group，则显示混乱了。 I played around with this configuration a lot and couldn't get the display I wanted. 我用这种配置玩了很多，却无法获得想要的显示。 Here's a sample code using btn-group: 这是使用btn-group的示例代码：

<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>

So to conclude.... wtf??? 总结一下...。wtf ？？？ I'm a noob and in no way I can claim that btn-group is useless inside of a form. 我是菜鸟，绝对不能声称btn-group在表单内部是无用的。 As a matter of fact I'm probably wrong. 事实上，我可能错了。 But this display of things confuses me and I couldn't find a correct way of using btn-group AND!! 但是，这种显示方式使我感到困惑，并且我找不到使用btn-group AND的正确方法！ having the display of the form as I wanted it..... 有我想要的形式显示.....

Is form-group enough to group radial buttons? 表单组足以对径向按钮进行分组吗？

Is btn-group actually not helpfull inside of forms? btn-group在表单内部实际上没有帮助吗？

is there a better way to include btn inside of a form and respecting the wireframe display I described? 有没有更好的方法将btn包含在表单中并尊重我描述的线框显示？

Pretty please if some has an answer i would appreciate any response 如果有人有答案，请多多关照

Answer 1

It seems to work fine except that the width wasnt enough for the radio buttons. 除宽度不足以容纳单选按钮外，它似乎工作正常。 So i changed 所以我改变了

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

to 至

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

NOTE : run the below snippet and view it in full screen mode 注意：运行以下代码段并以全屏模式查看

 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>

I'm thinking this is the kind of display you were going for. 我想这就是您想要的显示方式。

bootstrap表格中是否不需要bootstrap btn-group？

问题描述

1 个解决方案

解决方案1
0 已采纳 2017-04-17 20:40:14

bootstrap表格中是否不需要bootstrap btn-group？

问题描述

1 个解决方案

解决方案1 0 已采纳 2017-04-17 20:40:14

解决方案1
0 已采纳 2017-04-17 20:40:14