Вопрос по jquery, twitter-bootstrap, html – Исправление размера кнопки в Twitter Bootstrap

4

я используюTwitter Bootstrap в моем веб-приложении. У меня есть таблица со многими кнопками. Текст кнопки изменяется с текущим состоянием строки таблицы. Я изменяю текст кнопки с помощью Jquery, после ответов на запросы Ajax.

Моя проблема в том, что эти тексты кнопок & apos; длина не фиксирована. Некоторые из них длинные, некоторые из них короткие.

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

Можно ли исправить размер кнопки? Значит, все они имеют одинаковый размер?

http://i46.tinypic.com/28726jb.jpg

Ваш Ответ

2   ответа
2

Это будет держать кнопки в синхронизации с сеткой.

Обратите внимание, что пробел для некоторых элементов (например, абзаца) отличается от пробела на реальных кнопках, так что, вероятно, он испортит размер кнопки, если вы смешаете элементы в своей таблице (как я специально сделал в примере ниже). Поэтому лучше придерживаться только одного вида элементов.

Лично я предпочитаю избегать таблиц, но вы сказали, что собираетесь использовать таблицы, поэтому я тоже. Может быть, вы могли бы решить это только с помощью сетки / лесов, что, вероятно, было бы красивее, гибче и отзывчивее. Ваш звонок.

Также помните, что вы можете стилизовать практически любой элемент, чтобы он выглядел как кнопка. Если ваша кнопка содержит только ссылку, то тег A, вероятно, лучше; он все еще может выглядеть и функционировать как кнопка.

Вот уродливая старая таблица с множеством кликабелей, она помогает объяснить это, я надеюсь:

<table class="span8">
    <tr>
        <td>
        You could do buttons
        </td>

        <td>
        <button class="span3 btn btn-info">Like this button</button>
        </td>

        <td>
        <button class="span3 btn btn-info">and this</button>
        </td>
    </tr>

    <tr>        
        <td>
        Or a paragraph
        </td>

            <td>
        <p class="span3 btn btn-info">Like this paragraph</p>
        </td>

        <td>
        <a href="http://www.example.com" class="span3 btn btn-info">Or an anchor</a>
        </td>

    </tr>

        <tr>        
        <td>
        Note the difference in whitespace on Block elements (like Paragraphs and Anchors) and inline elements (like buttons).
        </td>

            <td>
        <p class="span3 btn btn-info">Like this paragraph</p>
        </td>

        <td>
        <a href="http://stackoverflow.com/" class="span3 btn btn-info">Or an anchor with an ridicilous amont of text on it, but this things do happen so plan ahead.</a>
        </td>

    </tr>

    <tr>        
        <td>
        Or a paragraph with a link
        </td>

            <td>
        <a href="http://stackoverflow.com/"><p class="span3 btn btn-info">Paragraph w/link</p></a>
        </td>

        <td>
        <button class="span3 btn btn-info">This a button with fairly long text. Beware of whitespace</button>
        </td>

    </tr>

    <tr>        
        <td>
        Or a paragraph with a link
        </td>
<td>
        <button class="span3 btn btn-info">Another button</button>
        </td>

        <td>
        <a href="http://stackoverflow.com/"><p class="span3 btn btn-info">Another linked paragraph</p></a>
        </td>



    </tr>


</table>

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

Можете ли вы привести простой пример, пожалуйста? trante
У меня были странные проблемы с расстоянием на кнопках. Когда я применил .span4 к входу, он расширился правильно, но когда я попробовал его на кнопке, у меня было много лишних пробелов слева от кнопки. Может быть, что-то еще не так. (Это также произошло с любым другим значением диапазона)
15

class="myButton"

Затем в пользовательской области CSS вашего шаблона вы можете просто указать этому классу ширину:

.myButton {
    width: 150px;
}

Or, если вы хотите, чтобы все они имели ширину самой длинной кнопки, которую вы можете использовать jQuery, просто вызывайте этот код всякий раз, когда значения вашего.myButton кнопки меняются. Этот код объясняется здесь:https://stackoverflow.com/a/5784399/1130734

$('.myButton').width(
    Math.max.apply(
        Math,
        $('.myButton').map(function(){
            return $(this).outerWidth();
        }).get()
    )
);

Вот пример jsfiddlehttp://jsfiddle.net/hQCf9/

Похожие вопросы