Question

我在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>

Answer 1

我通常建议使用媒体查询来更改按钮的宽度。现在它被设置为一定宽度，因此如果屏幕较小，则它会移出屏幕。使用简单的媒体查询，您可以说如果屏幕比...px窄，则宽度为100％。

也许尝试这样的事情：

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

Answer 2

您可以使用以下代码：

<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适用于手机超小型设备，因为您要求在移动用户屏幕的大小中进行管理。 for bootstrap 4将col-xs-12替换为col-12。

Answer 3

I seperated your html from the css and made some changes, using % instead of a fixed width.

Of course you could also use media queries for a responsive site

.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>

Hope this helps.

Answer 4

最快最简单的解决方案是使用自举网格系统。这是你的按钮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）codepen链接

使按钮大小与屏幕宽度相同

4 个答案: