Question

我在使用Bootstrap 3的容器中有3个按钮。当在计算机（笔记本电脑或台式电脑）上查看网站时，它们可以正常工作。但是，当网站在移动设备上查看时，它们无法正常运行。

我已添加到.col-xs-12 .col-md-4但是按钮没有跨越屏幕的整个宽度，文本没有停留在容器内。

以下是三个按钮的代码：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
      <div class="container">
        <div class="row">
          <div class="col-xs-12 col-md-4">
            <button type="button" id="cheapestOption" class="btn btn-block-xs" aria-label="center Align">
              <a href="pricing.html" target="_blank">
                <h4>Header 4</h4>
                <p><strong>£££</strong><span>/ £££ a month</span></p>
                <ul>
                  <li> Text </li>
                  <li> Text </li>
                  <li> Text </li>
                  <li> Text </li>
                </ul>
              </a>
            </button>
          </div>

          <div class="col-xs-12 col-md-4">
            <button type="button" class="btn " aria-label="center Align">
              <a href="pricing.html" target="_blank">
                <h4>Header 4</h4>
                <p><strong>£££</strong><span>/ £££ a month</span></p>
                <ul>
                  <li> Text </li>
                  <li> Text </li>
                  <li> Text </li>
                  <li> Text </li>
                </ul>
              </a>
            </button>
          </div>

          <div class="col-xs-12 col-md-4">
            <button type="button" class="btn " aria-label="center Align" disabled>
                <h4>Header 4</h4>
                <p><strong>£££</strong><span>/ £££ a month</span></p>
                <p id="tempBottom"><strong>Coming Soon</strong></p>
            </button>
          </div>
        </div>
      </div>
    </div>

#cheapestOption {
  font-family: 'Pavanam', sans-serif;
  width: 100%;
  background-color: rgba(255,255,255,0.3);
  border: none;
}

#cheapestOption a {
  text-decoration: none;
  color: white;
}

#cheapestOption p {
  font-family: 'Pavanam', sans-serif;
  font-size: 50px;
}

#cheapestOption ul{
  text-align: left;
  font-size: 17px;
}

#cheapestOption:hover {
  background-color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
}

@media (max-width: 767px){
  .btn-block-xs {
    display: block;
    width: 100%;
    margin-bottom: 10px;
  }
}

希望图像更有意义。

Answer 1

将DocumentRoot "/path_to_laravel_project/public" <Directory "/path_to_laravel_project/public">添加到每个.btn-block-xs类

尝试使用以下媒体查询：

您可以根据需要更改媒体查询值

CSS：

.btn

Answer 2

在媒体查询中为您的按钮指定移动宽度（注意，如果您使用内置按钮类的Bootstraps，则应自动执行此操作。）

示例：

@media only screen and (max-width: 767px) {
    button.btn{
       display:block; //force them to stack
       width:80% !important; // on small screens the buttons will be 80% screen width while 
       //leaving room for touch scrolling on the sides.
       margin: 0 auto; //to center them on small screens
    }
}

Answer 3

为按钮添加arr[i] % 2 === 0? (evenCount++, totalCount++) : (oddCount++, totalCount++);以跨越网格的宽度：

＆＃13;

btn-block

＆＃13;

Bootstrap 3无法正常工作

3 个答案: