Проблема выравнивания дизайна в HTML

ProgramBox

Проблема выравнивания дизайна в HTML

Post author:admin
Запись опубликована:20 февраля, 2023
Post category:Вопросы по программированию

#html #twitter-bootstrap

#HTML #twitter-bootstrap

Вопрос:

Ниже у меня есть эта картинка, которую я хочу преобразовать в web из Windows. Мне удается выполнить дизайн, но у меня проблема в сетке (I am using data tables in bootstrap) , я не могу выполнить дизайн так, как показано на картинке.

     <table>
    <tr>
        <td>
            <div>
                <input type="radio" />
                Radio Button
            </div>
        </td>
        <td>
            <input type="radio" />
            Radio Button
        </td>
    </tr>
    <tr>
        <td>
            <div>
                <input type="text" />
            </div>
        </td>
        <td>
            < div>
                < input type="button" />
            </div>
        </td>
    </tr>
</table >
<table >
    <tr>
        <td>
            <div class="row">
                <div class="col-lg-12">
                    <div class="panel panel-primary">
                        <div class="panel-heading">
                            <div class="row">
                                <div class="col-md-6">
                               < i class="fa fa-list fa-fw" >< / i >Table
                                < /div >
                            < /div>
                        < /div>
                        < !-- /.panel-heading -->
                        < div class="panel-body">
                            < div class="dataTable_wrapper">
           < table class="table table-striped table-bordered  table-hover table-responsive nowrap"
                   role="grid" style="width: 100%;" id="dataTables-xxxx">
                   </table>
            </div>
                        </div>
                    </div>
                </div>
            < /div>
        </td>
        <td>
         <div class="row">
                <div class="col-lg-12">
                    <div class="panel panel-primary">
                        <div class="panel-heading">
                            <div class="row">
                                <div class="col-md-6">
                                    < i class="fa fa-list fa-fw"></i>Table
                                < /div>
                            < /div>
                        </div>
                        <!-- /.panel-heading -->
                        <div class="panel-body">
                            <div class="dataTable_wrapper">
                                <table class="table table-striped table-bordered table-hover table-responsive nowrap"
                                    role="grid" style="width: 100%;" id="dataTables-xxasdxx">
                                </table>
                            < /div>
                        < /div>
                    < /div>
                < /div>
            < /div>
        </ td>
    < /tr>
< /table>

Мои 2 изображения ниже:

1. вы хотите, чтобы ваш дизайн был похож на картинку 1 или картинку 2???

2. Я следую дизайну с картинки. Мой текущий результат — изображение 2.

3. Подобный код </table>< /div>< /div>< /div>< /div>< /div></ td>< /tr>< /table> редко является хорошим знаком. Таблицы должны использоваться только для табличных данных, а не для макета. Использование таблиц для макета противоречит практически всему, что обозначает Bootstrap.

4. @JonP можете ли вы поделиться примером ?.

Ответ №1:

Попробуйте приведенный ниже дизайн, надеюсь, это поможет.Вы можете настроить свойство столбца по своему желанию, я только что добавил базовый скелет.

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>

<div class="container">
<div class="row">


<div class=" col-sm-12 form-group">
 <div class=" col-sm-2">
  <input type="radio" />
                Radio Button
  </div >
   <div class=" col-sm-2">
    <input type="radio" />
                Radio Button
     </div >
	   </div >
	
<div class=" col-sm-12 form-group ">
 <div class=" col-sm-2">
 <input type="text" class="form-control" id="usr">
 </div>
<div class=" col-sm-2">
 <button type="button" class="btn btn-default">Submit</button>
 </div>
  </div>
 

  <div class="table-responsive col-md-6">
    <table class="table table-bordered">
	  <thead>
                <tr>
                  <th class="col-md-1">#</th>
                  <th class="col-md-2">Header</th>
                  <th class="col-md-3">Header</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td class="col-md-1">1,001</td>
                  <td class="col-md-2">1,001</td>
                  <td class="col-md-3">1,001</td>
                </tr>
                <tr>
                  <td class="col-md-1">1,001</td>
                  <td class="col-md-2">1,001</td>
                  <td class="col-md-3">1,001</td>
                </tr>
                 <tr>
                  <td class="col-md-1">1,001</td>
                  <td class="col-md-2">1,001</td>
                  <td class="col-md-3">1,001</td>
                </tr>
              </tbody>
	  </table>
  </div>
  <div class="table-responsive col-md-6">
      <table class="table table-bordered">
	  <thead>
                <tr>
                  <th class="col-md-1">#</th>
                  <th class="col-md-2">Header</th>
                  <th class="col-md-3">Header</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td class="col-md-1">1,001</td>
                  <td class="col-md-2">1,001</td>
                  <td class="col-md-3">1,001</td>
                </tr>
                <tr>
                  <td class="col-md-1">1,001</td>
                  <td class="col-md-2">1,001</td>
                  <td class="col-md-3">1,001</td>
                </tr>
                 <tr>
                  <td class="col-md-1">1,001</td>
                  <td class="col-md-2">1,001</td>
                  <td class="col-md-3">1,001</td>
                </tr>
              </tbody>
	  </table>
  </div>
</div>
</div>
  </body>

Или посмотрите Приведенную Ниже скрипку для лучшего просмотра

демонстрационная скрипка дизайна таблицы (обновлена)

1. @Redoy Чего я хочу, так это как я могу сделать свой дизайн похожим на рисунок 1 ?. Как и в таблице на рисунке 1, и посмотрите мои выходные данные, они имеют одинаковый размер. T_T

2. о, вы хотите две таблицы разного размера в соответствии с картинкой? другие в порядке??

3. посмотрите обновленную скрипку и дайте мне знать, работает ли она для вас или нет.

4. @Redoy наконец. Как я могу сделать так, чтобы 1-я таблица данных была меньше, чем 2-я таблица данных, как на рисунке 1 в моем сообщении.

5. вы проверили скрипку, которую я обновил?? ну, в bootstrap это зависит от вашей сетки, большой или маленькой, вы также можете использовать пользовательский css, но использовать grid в первую очередь просто.

Ответ №2:

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

табличные теги предназначены в первую очередь для форматирования данных. В Bootstrap есть концепция компоновки сетки, которая предназначена для компоновки вашего пользовательского интерфейса без использования таблиц.

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

 .custom-margin {
  margin-top: 10px;
  margin-bottom: 10px;
}

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="custom-container">
  <div class="radio">
    <label class="radio-inline">
      <input type="radio" name="" id="optionsRadiosOne" value="optionOne">Radio Button One
    </label>
    <label class="radio-inline">
      <input type="radio" name="" id="optionsRadiosTwo" value="optionTwo">Radio Button Two
    </label>
  </div>
  <div class="custom-margin">
    <form class="form-inline">
      <div class="form-group">
        <label for="exampleInputName2">Enter Email :</label>
        <input type="text" class="form-control" placeholder="Enter Email">
      </div>
      <button type="submit" class="btn btn-primary">Send invitation</button>
    </form>
  </div>
  <div class="row">
    <div class="col-lg-3">
      <table class="table table-hover">
        <tr>
          <td>Header One
          </td>
          <td>Header Two
          </td>
        </tr>
        <tr>
          <td>Row Content
          </td>

          <td>Row Content
          </td>
        </tr>

        <tr>
          <td>Row Content
          </td>

          <td>Row Content
          </td>
        </tr>
      </table>
    </div>

    <div class="col-lg-6">
      <table class="table table-hover">
        <tr>
          <td>Header One
          </td>
          <td>Header Two
          </td>
        </tr>
        <tr>
          <td>Row Content
          </td>

          <td>Row Content
          </td>
        </tr>

        <tr>
          <td>Row Content
          </td>

          <td>Row Content
          </td>
        </tr>
      </table>
    </div>
  </div>
</div>