Столбец начальной загрузки не такой же ширины при использовании ввода формы - PullRequest
Новая
       24

Столбец начальной загрузки не такой же ширины при использовании ввода формы

0 голосов
/ 29 октября 2018

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

Может ли кто-нибудь помочь с этим, чтобы настроить ширину, чтобы быть согласованным для всех столбцов? Спасибо.

enter image description here

<!doctype html>

<head>
    <link rel="stylesheet" href="./frameworks/bootstrap.min.css"></link>
    <script src="./frameworks/bootstrap.min.js"></script>
    <script src="./frameworks/button_plus_minus.js"></script>
    <link href="./font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
</head>


<body>
    <div class="container">
        <div class="row">
            <div class="col-xs-7">
                <table class="table table-striped">
                    <thead>
                        <tr>
                        <th>#</th>
                        <th>Date</th>
                        <th>Time</th>
                        <th>Location</th>
                        <th>Item</th>
                        <th>Value ($)</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                        <td>1</td>
                        <td>28 Aug</td>
                        <td>10:47:21</td>
                        <td>Australia</td>
                        <td>Silver</td>
                        <td>1500</td>
                        </tr>
                        <tr>
                        <td>2</td>
                        <td>28 Aug</td>
                        <td>10:47:21</td>
                        <td>Australia</td>
                        <td>Gold</td>
                        <td>
                            <div class="col-xs-8 input-group">
                                <span class="input-group-btn">
                                    <button type="button" class="btn qtyminus" data-type="minus" field='quantity'">
                                        <span class="fa fa-minus"></span>
                                    </button>
                                </span>
                                <input id="inputvalue2" type="text" name="quantity" class="form-control qty" value="1000" min="1" max="100000"></input>
                                <span class="input-group-btn">
                                    <button type="button" class="btn qtyplus" data-type="plus" field='quantity'">
                                        <span class="fa fa-plus"></span>
                                    </button>
                                </span>
                            </div>
                        </td>
                        </tr>
                        <tr>
                        <td>3</td>
                        <td>28 Aug</td>
                        <td>10:47:21</td>
                        <td>US</td>
                        <td>Computer</td>
                        <td>2000</td>
                        </tr>
                        <tr>
                        <td>4</td>
                        <td>28 Aug</td>
                        <td>10:47:21</td>
                        <td>Japan</td>
                        <td>Bags</td>
                        <td>1000</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
</body>

1 Ответ

0 голосов
/ 29 октября 2018

Добавлен класс к тегу <table> и <input>. Благодаря центру выравнивания текста ваша таблица станет более тонкой и последовательной. Вам также следует попробовать использовать классы для экранов других размеров, таких как col-md-6 или col-lg-4, которые вам больше подходят. Но эта практика поможет вам контролировать свой пользовательский интерфейс на экранах разных размеров. Надеюсь, это поможет. Дайте мне знать, если это не сработает для вас. 

    <!doctype html>

<head>
    <link rel="stylesheet" href="./frameworks/bootstrap.min.css"></link>
    <script src="./frameworks/bootstrap.min.js"></script>
    <script src="./frameworks/button_plus_minus.js"></script>
    <link href="./font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
        <style>
.txt_cent{
    text-align:center;
}
.inp_width{
    width:70px;
}
    </style>
</head>


<body>
    <div class="container">
        <div class="row">
            <div class="col-xs-7">
                <table class="table table-striped txt_cent" >
                    <thead>
                        <tr>
                        <th>#</th>
                        <th>Date</th>
                        <th>Time</th>
                        <th>Location</th>
                        <th>Item</th>
                        <th>Value ($)</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                        <td>1</td>
                        <td>28 Aug</td>
                        <td>10:47:21</td>
                        <td>Australia</td>
                        <td>Silver</td>
                        <td>1500</td>
                        </tr>
                        <tr>
                        <td>2</td>
                        <td>28 Aug</td>
                        <td>10:47:21</td>
                        <td>Australia</td>
                        <td>Gold</td>
                        <td>
                            <div class="col-xs-8 input-group">
                                <span class="input-group-btn">
                                    <button type="button" class="btn qtyminus" data-type="minus" field='quantity'">
                                        <span class="fa fa-minus"></span>
                                    </button>
                                </span>
                                <input id="inputvalue2" type="text" name="quantity" class="form-control qty inp_width" value="1000" min="1" max="100000"></input>
                                <span class="input-group-btn">
                                    <button type="button" class="btn qtyplus" data-type="plus" field='quantity'">
                                        <span class="fa fa-plus"></span>
                                    </button>
                                </span>
                            </div>
                        </td>
                        </tr>
                        <tr>
                        <td>3</td>
                        <td>28 Aug</td>
                        <td>10:47:21</td>
                        <td>US</td>
                        <td>Computer</td>
                        <td>2000</td>
                        </tr>
                        <tr>
                        <td>4</td>
                        <td>28 Aug</td>
                        <td>10:47:21</td>
                        <td>Japan</td>
                        <td>Bags</td>
                        <td>1000</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...