Как исправить эту список-группу в Bootstrap 4? - PullRequest
Новая
       6

Как исправить эту список-группу в Bootstrap 4?

0 голосов
/ 04 декабря 2018

У меня есть 2 проблемы в этом коде, которые нужно исправить.

1) Я хочу переместить значки по центру в li

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

Вот код: 

section {
  background: #2193b0;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #6dd5ed, #2193b0);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #6dd5ed, #2193b0);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  padding-top: 5%;
  width: 100%;
  height: 100vh;
}

.emp-profile {
  border-radius: 0.5rem;
  background: #fff;
  padding: 5%
}

.profile-img {
  text-align: center;
}

.profile-img img {
  width: 100%;
  height: 100%;
}

.material-icons {
  color: #2193b0 !important;
  cursor: pointer;
  margin-left: 30px;
}

.list-group li {
  padding: 10px 50px
}

.list-group li p {
  color: #222222
}

.list-group li a {
  text-decoration: none;
}

.toolbar-scroll {
  overflow-y: auto;
}

#toolbar-content {
  display: flex;
  flex-direction: row
}

.message {
  display: flex;
  flex-direction: column;
}

#list-group {
  flex: 1 1;
}

.chat {
  display: flex;
  flex-direction: row;
}

.chat img {
  width: 50px;
  height: 50px;
  margin-right: 10px;
  border: 1px solid #222222
}

.chat .username {
  font-size: 16px;
  font-weight: bold;
  color: #2193b0;
}

.chat .letter {
  margin-top: 0;
  padding-top: 0
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">


<section>
  <div class="container">
    <div class="emp-profile justify-content-center">
      <div class="row">
        <div class="col-md-8">
          <ul class="list-group clearfix">
            <li class="list-group-item justify-content-center align-items-center mx-auto">
              <a class=" chat" href="#">

                <img src="http://emilcarlsson.se/assets/donnapaulsen.png" class="rounded-circle">
                <div class='message'>
                  <h3 class="d-xs-none username">Jessica</h3>
                  <p class="d-xs-none letter">StanIsLove aaaaaaaaaaaaaaaaa.</p>
                </div>
                <div class="float-right">
                  <i class="material-icons" (click)="MarkNotication(data)" [ngClass]="data.read ? 'disabled': 'notDisbled'">
                check
              </i>
                  <i class="material-icons" (click)="DeleteNotification(data)">
                delete_forever
              </i>
                </div>
              </a>
            </li>
          </ul>
        </div>

      </div>
    </div>
  </div>
</section>

Как я могу исправить эти 2 проблемы?Я также добавляю ссылку на полный код в комментарии.

Ответы [ 3 ]

0 голосов
/ 04 декабря 2018

  1. Вы можете легко отцентрировать значки по вертикали, добавив:

    .material-icons {height: 100px;высота строки: 100px;}

Убедитесь, height == line-height.

0 голосов
/ 04 декабря 2018

Вы можете добавить классы d-flex и align-items-center в контейнер значков, чтобы центрировать их по вертикали : 

section {
  background: #2193b0;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #6dd5ed, #2193b0);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #6dd5ed, #2193b0);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  padding-top: 5%;
  width: 100%;
  height: 100vh;
}

.emp-profile {
  border-radius: 0.5rem;
  background: #fff;
  padding: 5%
}

.profile-img {
  text-align: center;
}

.profile-img img {
  width: 100%;
  height: 100%;
}

.material-icons {
  color: #2193b0 !important;
  cursor: pointer;
  margin-left: 30px;
}

.list-group li {
  padding: 10px 50px
}

.list-group li p {
  color: #222222
}

.list-group li a {
  text-decoration: none;
}

.toolbar-scroll {
  overflow-y: auto;
}

#toolbar-content {
  display: flex;
  flex-direction: row
}

.message {
  display: flex;
  flex-direction: column;
}

#list-group {
  flex: 1 1;
}

.chat {
  display: flex;
  flex-direction: row;
}

.chat img {
  width: 50px;
  height: 50px;
  margin-right: 10px;
  border: 1px solid #222222
}

.chat .username {
  font-size: 16px;
  font-weight: bold;
  color: #2193b0;
}

.chat .letter {
  margin-top: 0;
  padding-top: 0
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/material-design-icons/3.0.1/iconfont/material-icons.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">


<section>
  <div class="container">
    <div class="emp-profile justify-content-center">
      <div class="row">
        <div class="col-md-8">
          <ul class="list-group clearfix">
            <li class="list-group-item justify-content-center align-items-center mx-auto">
              <a class=" chat" href="#">

                <img src="http://emilcarlsson.se/assets/donnapaulsen.png" class="rounded-circle">
                <div class='message'>
                  <h3 class="d-xs-none username">Jessica</h3>
                  <p class="d-xs-none letter">StanIsLove aaaaaaaaaaaaaaaaa.</p>
                </div>
                <div class="float-right d-flex align-items-center">
                  <i class="material-icons" (click)="MarkNotication(data)" [ngClass]="data.read ? 'disabled': 'notDisbled'">
                check
              </i>
                  <i class="material-icons" (click)="DeleteNotification(data)">
                delete_forever
              </i>
                </div>
              </a>
            </li>
          </ul>
        </div>

      </div>
    </div>
  </div>
</section>
0 голосов
/ 04 декабря 2018

  1. используйте margin: auto; для переноса div иконок см. Здесь

    (я добавил новый вызов класса margin и установил в css .margin{margin: auto;})

  2. используйте event.stopPropagation(); на значке клика (используйте его после кода)

например: 

function MarkNotication(data,event){
   // your code to mark then:
   event.stopPropagation();
}

В html отправьте event для работы: 

  <i class="material-icons" (click)="MarkNotication(data,event)" [ngClass]="data.read ? 'disabled': 'notDisbled'">
    check
  </i>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...