Вопросы Теги

Как установить два деления по бокам страницы?

Сделал некоторые оптимизации для кода Тревиса Linkify() выше. Я также исправил ошибку, когда адреса электронной почты с форматами типа субдомена не были сопоставлены (например, example@domain.co.uk).

Кроме того, я изменил реализацию, чтобы прототипировать класс String, чтобы элементы могут быть сопоставлены так: 

var text = 'address@example.com';
text.linkify();

'http://stackoverflow.com/'.linkify();

В любом случае, вот сценарий: 

if(!String.linkify) {
    String.prototype.linkify = function() {

        // http://, https://, ftp://
        var urlPattern = /\b(?:https?|ftp):\/\/[a-z0-9-+&@#\/%?=~_|!:,.;]*[a-z0-9-+&@#\/%=~_|]/gim;

        // www. sans http:// or https://
        var pseudoUrlPattern = /(^|[^\/])(www\.[\S]+(\b|$))/gim;

        // Email addresses
        var emailAddressPattern = /[\w.]+@[a-zA-Z_-]+?(?:\.[a-zA-Z]{2,6})+/gim;

        return this
            .replace(urlPattern, '<a href="$&">$&</a>')
            .replace(pseudoUrlPattern, '$1<a href="http://$2">$2</a>')
            .replace(emailAddressPattern, '<a href="mailto:$&">$&</a>');
    };
}
1
задан Rai 18 January 2019 в 08:43
поделиться

3 ответа

Вы используете загрузчик. Используйте класс начальной загрузки justify-content-between. Это гарантирует, что элементы в этом блоке имеют эквивалентное пространство между ними.

Теперь, когда есть только два элемента, вы получаете полное пространство в центре.

Вы также можете использовать justify-content-around. 

.bootstrap-table .table:not(.table-condensed),
.bootstrap-table .table:not(.table-condensed)>tbody>tr>th,
.bootstrap-table .table:not(.table-condensed)>tfoot>tr>th,
.bootstrap-table .table:not(.table-condensed)>thead>tr>td,
.bootstrap-table .table:not(.table-condensed)>tbody>tr>td,
.bootstrap-table .table:not(.table-condensed)>tfoot>tr>td {
  padding: 2px 3px 2px 3px;
}

.header-size-section {
  display: flex;
  font-weight: 600;
  margin-bottom: 2px;
}

.size-list {
  padding-bottom: 1px;
  padding-top: 1px;
}

.table-search-list {
  margin: 0px;
  display: table-cell;
  vertical-align: middle;
  padding: 6px;
}

.search-table {
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.header-search-section,
.lable-size-section {
  display: inline-table;
}

header-size-section>header-search-section {
  float: right;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

<div class="header-size-section justify-content-between">
  <div class="lable-size-section">
    <select class="form-control size-list" id="table-size-list" name="table-size-list" onchange="tableSizeChanged(this)">
            <option>25</option>
            <option>50</option>
            <option>100</option>
            <option>all</option>
        </select>
  </div>
  <div class="header-search-section">
    <span class="table-search-list">Search: </span>
    <input type="text" class="search-table" />
  </div>
</div>

Это пример с justify-content-around. 

.bootstrap-table .table:not(.table-condensed),
.bootstrap-table .table:not(.table-condensed)>tbody>tr>th,
.bootstrap-table .table:not(.table-condensed)>tfoot>tr>th,
.bootstrap-table .table:not(.table-condensed)>thead>tr>td,
.bootstrap-table .table:not(.table-condensed)>tbody>tr>td,
.bootstrap-table .table:not(.table-condensed)>tfoot>tr>td {
  padding: 2px 3px 2px 3px;
}

.header-size-section {
  display: flex;
  font-weight: 600;
  margin-bottom: 2px;
}

.size-list {
  padding-bottom: 1px;
  padding-top: 1px;
}

.table-search-list {
  margin: 0px;
  display: table-cell;
  vertical-align: middle;
  padding: 6px;
}

.search-table {
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.header-search-section,
.lable-size-section {
  display: inline-table;
}

header-size-section>header-search-section {
  float: right;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

<div class="header-size-section justify-content-around">
  <div class="lable-size-section">
    <select class="form-control size-list" id="table-size-list" name="table-size-list" onchange="tableSizeChanged(this)">
            <option>25</option>
            <option>50</option>
            <option>100</option>
            <option>all</option>
        </select>
  </div>
  <div class="header-search-section">
    <span class="table-search-list">Search: </span>
    <input type="text" class="search-table" />
  </div>
</div>

0
ответ дан Prajwal 18 January 2019 в 08:43
поделиться

Обратите внимание: .header-size-section (изменить отображение: flex для отображения: блок) и .header-size-section>.header-search-section (пропущенные точки) 

.bootstrap-table .table:not(.table-condensed),
.bootstrap-table .table:not(.table-condensed)>tbody>tr>th,
.bootstrap-table .table:not(.table-condensed)>tfoot>tr>th,
.bootstrap-table .table:not(.table-condensed)>thead>tr>td,
.bootstrap-table .table:not(.table-condensed)>tbody>tr>td,
.bootstrap-table .table:not(.table-condensed)>tfoot>tr>td {
  padding: 2px 3px 2px 3px;
}

.header-size-section {
  display: block;
  font-weight: 600;
  margin-bottom: 2px;
}

.size-list {
  padding-bottom: 1px;
  padding-top: 1px;
}

.table-search-list {
  margin: 0px;
  display: table-cell;
  vertical-align: middle;
  padding: 6px;
}

.search-table {
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.header-search-section,
.lable-size-section {
  display: inline-table;
}

.header-size-section>.header-search-section {
  float: right;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

<div class="header-size-section justify-content-between">
  <div class="lable-size-section">
    <select class="form-control size-list" id="table-size-list" name="table-size-list" onchange="tableSizeChanged(this)">
            <option>25</option>
            <option>50</option>
            <option>100</option>
            <option>all</option>
        </select>
  </div>
  <div class="header-search-section">
    <span class="table-search-list">Search: </span>
    <input type="text" class="search-table" />
  </div>
</div>
[ 114]

0
ответ дан Alvin Theodora 18 January 2019 в 08:43
поделиться

Вы можете просто сделать это и удалить оставшуюся часть CSS: 

.header-size-section {
  display: flex;
  font-weight: 600;
}

.lable-size-section {
  margin-right: 25px;
}

.search-table {
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
0
ответ дан Josh Kelly 18 January 2019 в 08:43
поделиться
© 2017 - 2020 Вопросы и ответы по программированию