The idea is good, but there is a problem: Due to necessary compatibility with different screen sizes on different devices (Desktop, Tablet, Smartphone) in landscape or portrait mode, you will have to calculate a "correct" width per radio and adjust the css-width of the controls. But that strongly depends on the display environment AND on the different string-lengths (label-widths) of the options. You cannot ensure a fixed number of radios per line because you do not know the avaialable space at the endpoint and you do not know the widths of all (visible) options beforehand.
I did some experiments the last days and I'm not satisfied with the results, see screenshots on different screen size emulations. Cutting the labels to a maximum width would solve the problem with different widths. But you lose information. So we need a different approach.
I think for avoiding trouble with different screen sizes, a solution should be based on Bootstrap's grid-system. So for example we could be able to configure:
- in xs-devices, there shall be 1 radio per row
- in sm: 2 radios
- in md: 3 radios
- and in lg: 4 radios
Remember, Bootstrap's grid system allows 1-12 columns, for example 1 column x 12/12 width, 2 columns x 6/12 width, 3 columns x 4/12 width, 4 columns x 3/12 width, 6 columns x 2/12 width or 12 columns x 1/12 width. Additionally all combinations which sum up to 12 are allowed, for example 3 columns of 3/12 + 5/12 + 4/12. As long as we stick to that 12-column grid, Bootstrap will care for compatibility with different device sizes.
So an approach for handling the requirement given in the beginning could be:
Add a div.row to the div which contains the radios, then for each radio append a div.col-xs-aaa.col-sm-bbb.col-md-ccc.col-lg-ddd with best-possible aaa, bbb, ccc, ddd.
Doing it this way would not allow you to freely define the number of radios per row, but it would allow more than one radio per row AND a well aligned layout, compatible with different device sizes and resolutions.