ширина Изменение размера контрольной группы JQuery Mobile

Question

У меня возникли проблемы, пытаясь выяснить, как изменить размер контрольной группы в JQuery Mobile 1.3.0

Я не знаю, правильный подход, прямо сейчас я с изменением размера .ui-BTN класс, например, так:

#test_1 .ui-btn { 
    width: 200%; 
} 

Но это не изменение размера кнопки, как я ожидаю, правая кнопки пересекаться с левой кнопки, если я делаю их больше, или они не изменить положение, когда я сделать их меньше ,

Это мой HTML, это контрольная группа с 5 блоков, 4 из них являются колонны и одна является Solo группа в середине:

<fieldset class="ui-grid-a" data-role="controlgroup" data-mini="true" id="test_1"> 
     <div class="ui-block-a"> 
      <label>Aaaaaaaaaaa 
       <input type="radio" name="accion" value="1"> 
      </label> 
      <label>Aaaaaaaaaaa 
       <input type="radio" name="accion" value="1"> 
      </label> 
      <label>Aaaaaaaaaaa 
       <input type="radio" name="accion" value="1"> 
      </label> 
     </div> 
     <div class="ui-block-b"> 
      <label>Aaaaaaaaaaa 
       <input type="radio" name="accion" value="1"> 
      </label> 
      <label>Aaaaaaaaaaa 
       <input type="radio" name="accion" value="1"> 
      </label> 
      <label>Aaaaaaaaaaa 
       <input type="radio" name="accion" value="1"> 
      </label> 
     </div> 
     <div class="ui-grid-solo"> 
      <label>AaaaaaaaaaaAaaaaaaaaaa 
       <input type="radio" name="accion" value="1"> 
      </label> 
     </div> 
     <div class="ui-block-a"> 
      <label>Aaaaaaaaaaa 
       <input type="radio" name="accion" value="1"> 
      </label> 
      <label>Aaaaaaaaaaa 
       <input type="radio" name="accion" value="1"> 
      </label> 
      <label>Aaaaaaaaaaa 
       <input type="radio" name="accion" value="1"> 
      </label> 
     </div> 
     <div class="ui-block-b"> 
      <label>Aaaaaaaaaaa 
       <input type="radio" name="accion" value="1"> 
      </label> 
      <label>Aaaaaaaaaaa 
       <input type="radio" name="accion" value="1"> 
      </label> 
      <label>Aaaaaaaaaaa 
       <input type="radio" name="accion" value="1"> 
      </label> 
     </div> 
    </fieldset> 

Весь код в jsFiddle я установил: http://jsfiddle.net/4zMqn/1/

Заранее благодарим!

Answer 1

Решение

Чтобы исправить вашу проблему использовать этот CSS:

#test_1 { 
    width: 70% !important; 
} 

Потому что fieldset уже определил ширину, нам нужно переопределить его нашим значением, и это можно сделать с помощью ! Important.

Рабочий jsFiddle пример: http://jsfiddle.net/Gajotres/SuqRY/

Подробнее

Если вы хотите узнать, как сделать этот вид изменения самостоятельно, вы должны проверить это article, она научит вас, как сделать это сам.

Answer 2

Один из способов сделать это, чтобы переопределить CSS-стиль по умолчанию для размера кнопки и добавить в свой собственный класс CSS

.ui-mini .ui-btn-inner { 
    // resize code 
}