Сделать размер кнопки таким же, как ширина экрана - PullRequest
Новая
       5

Сделать размер кнопки таким же, как ширина экрана

0 голосов
/ 24 мая 2018

Я использую этот код кнопки в блоге Blogger.Но проблема в том, что в мобильном телефоне ширина уходит за пределы экрана.Как я могу настроить его под размер экрана пользователя? 

<div class="column" style="box-sizing: inherit; display: inline-block; margin-bottom: 0em; margin-top: 0em; padding-left: 1rem; padding-right: 1rem; vertical-align: middle; width: 650px;">
    <div class="margin-top centered" style="box-sizing: inherit; margin-top: 1.6rem; text-align: center;">
        <a class="btn" href="Link-Here" style="-webkit-tap-highlight-color: transparent; background-color: #00bd9a; border-radius: 2px; box-shadow: rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px, rgba(0, 0, 0, 0.2) 0px 3px 1px -2px; box-sizing: inherit; color: white; cursor: pointer; display: inline-block; height: 42px; letter-spacing: 0.5px; line-height: 42px; padding: 0px 3rem; pointer-events: all; position: relative; text-decoration-line: none; text-transform: uppercase; vertical-align: middle; width: 537px;">Text Here</a>
    </div>
</div>

Ответы [ 4 ]

0 голосов
/ 24 мая 2018

Вы можете использовать следующий код: 

<div class="container">
  <h2>Block Level Buttons</h2>
  <button type="button" class="btn btn-primary btn-block">Button 1</button>
  <button type="button" class="btn btn-default btn-block">Button 2</button>

  <h2>Large Block Level Buttons</h2>
  <button type="button" class="btn btn-primary btn-lg btn-block">Button 1</button>
  <button type="button" class="btn btn-default btn-lg btn-block">Button 2</button>

  <h2>Small Block Level Buttons</h2>
  <button type="button" class="btn btn-primary btn-sm btn-block">Button 1</button>
  <button type="button" class="btn btn-default btn-sm btn-block">Button 2</button>
</div>

https://jsfiddle.net/0vu83eru/3/

вы всегда можете использовать для этого систему координат: 

<div class="container">
            <div class="row">
                <div class="col-xs-12  col-sm-6 ">
                    <button class="btn btn-primary btn-block">Click me!</button>
                </div>
            </div>
        </div>

xs длямобильные устройства очень маленькие, как вы просили управлять им в размере экрана мобильного пользователя.для начальной загрузки 4 замените col-xs-12 на col-12.

0 голосов
/ 24 мая 2018

Я отделил ваш HTML от CSS и внес некоторые изменения, используя % вместо фиксированной ширины.

Конечно, вы также можете использовать медиа-запросы для адаптивного сайта 

.column {
  box-sizing: inherit;
  display: inline-block;
  margin-bottom: 0em;
  margin-top: 0em;
  vertical-align: middle;
  width: 100%;
}

.margin-top {
  margin-top: 1.6rem;
}

.centered {
  box-sizing: inherit;
  text-align: center;
}

.btn {
  -webkit-tap-highlight-color: transparent;
  background-color: #00bd9a;
  border-radius: 2px;
  box-shadow: rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px, rgba(0, 0, 0, 0.2) 0px 3px 1px -2px;
  box-sizing: inherit;
  color: white;
  cursor: pointer;
  display: inline-block;
  height: 42px;
  letter-spacing: 0.5px;
  line-height: 42px;
  padding: 0px 1rem;
  pointer-events: all;
  position: relative;
  text-decoration-line: none;
  text-transform: uppercase;
  vertical-align: middle;
  width: 80%;
}
<div class="column">
  <div class="margin-top centered">
    <a class="btn" href="#" style="">
        Text Here
      </a>
   </div>
</div>

Надеюсь, это поможет.

0 голосов
/ 24 мая 2018

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

<div class="container" style="margin:10px">
  <div class="row">
    <div class="col-md-6">
      <a class="btn" href="#">New</a>
    </div>
  </div>
</div>

Вот (https://codepen.io/faaiz/pen/WJBdOy) кодовая ссылка

0 голосов
/ 24 мая 2018

Обычно я бы предложил использовать медиа-запрос для изменения ширины кнопки.Теперь он установлен на определенную ширину, поэтому, если экран меньше, он выходит за пределы экрана.С помощью простого медиазапроса вы можете сказать, что если экран уже, чем ...px, ширина равна 100%.

Возможно, попробуйте что-то вроде этого: 

@media only screen and (max-width: 600px) {
    btn {
        width: 100%;
    }
}
...