Question

所以我上传了一个与此问题相同的问题，然而，这个问题非常拥挤，所以我再次提出问题，希望能更好地解释我的问题。

我目前正在使用HTML，CSS和JavaScript以及引导程序创建自己的网站。在尝试使网站移动友好时，我注意到屏幕上显示3个按钮的错误。基本上，我想要发生的是，当在移动设备上查看网页时，三个按钮彼此堆叠，每个按钮之间有间隙。但是，按钮没有正确显示。见第一张图片。

我要说的一件事是，我正在使用该功能（不确定它是否只在谷歌浏览器中），当您单击检查元素时，您可以选择一个允许您查看的选项网页在移动屏幕上的样子。我所得到的是，我不知道代码是错误的还是Google Chrome的功能不能很好地运作。

如果您对我可以用来在移动设备上查看HTML文件的应用程序有任何建议，请告诉我。

请注意。我只提供其中一个按钮的代码，因为其他两个基本相同

＆＃13;

@media (max-width: 767px){
  .btn-block-xs {
    display: block;
    width: 100%;
    margin-bottom: 10px;
  }
}

#cheapestOption {
  font-family: 'Pavanam', sans-serif;
  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;
}

＆＃13;

    <div class="container-fluid" id="grad"> <!-- Pricing Buttons -->
      <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>Text</h4>
                <p><strong>£££</strong><span>/ £5 a month</span></p>
                <ul>
                  <li> Text </li>
                  <li> Text </li>
                  <li> Text </li>
                  <li> Text </li>
                </ul>
              </a>
            </button>
          </div>

＆＃13;

（首张图片展示了它在移动设备上的样子）（这是需要修理的）（第二张图显示了它在桌面上的样子）（这很好）

Answer 1

你的html和css并没有真正关注bootstrap文档。我建议你阅读更多关于bootstrap的工作原理。你可以简化很多你正在做的事情，也可能让事情看起来好多了。

我建议创建一个按钮，它是一个链接并将文本移出它。要准确回答您的问题，请参阅此jsfiddle。

我将您的HTML移动到正确的col class如果您有任何疑问，请告诉我，

HTML

<div class="container">
   <div class="row">
  <div class="col-md-4 col-sm-4 col-xs-4"><button type="button" id="cheapestOption" class="btn btn-block-xs" aria-label="center Align">
          <a href="pricing.html" target="_blank">
            <h4>Text</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-md-4 col-sm-4 col-xs-4"> <button type="button" id="averageOption" class="btn btn-block-xs" aria-label="center Align">
          <a href="pricing.html" target="_blank">
            <h4>Text</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-md-4 col-sm-4 col-xs-4"> <button type="button" id="expensiveOption" class="btn btn-block-xs" aria-label="center Align" disabled>
          <h4>Text</h4>
          <p><strong>£££</strong><span>/ £££ a month</span></p>
          <p id="tempBottom"><strong>Coming Soon</strong></p>
        </button></div>
</div>
</div>

CSS

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

#cheapestOption {
  font-family: 'Pavanam', sans-serif;
  background-color: red;
  border: none;
}

#cheapestOption a {
  text-decoration: none;
  color: white;
}

#cheapestOption p {
  font-family: 'Pavanam', sans-serif;
   font-size: 1em;
}

#cheapestOption ul {
  text-align: left;
  font-size: 17px;
}

#cheapestOption:hover {
  background-color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
}

#averageOption {
  font-family: 'Pavanam', sans-serif;
  width: 100%;
  background-color: red;
  border: none;
  color: white;
}

#averageOption a {
  text-decoration: none;
  color: white;
}

#averageOption p {
  font-family: 'Pavanam', sans-serif;
   font-size: 1em;
}

#averageOption ul {
  text-align: left;
  font-size: 17px;
}

#averageOption:hover {
  background-color: rgba(255, 255, 255, 0.6);
}

#expensiveOption {
  font-family: 'Pavanam', sans-serif;
  width: 100%;
  background-color: red;
  border: none;
  color: white;
}

#expensiveOption a {
  text-decoration: none;
  color: white;
}

#expensiveOption p {
  font-family: 'Pavanam', sans-serif;
  font-size: 1em;
}

#expensiveOption ul {
  text-align: left;
  font-size: 1em;
}

为了简化这一点，您需要记住以下几点，

Bootstrap是专为移动设备而构建的。每行包含12个部分，因此当您告诉它col-md-4时，您说当浏览器是col-md的宽度时，您希望该空间占据行宽度的1/3。

您可以使用col-xs col-sm -col-md等将默认css内置到引导程序中的每个浏览器大小定位...要查看每个col-size的默认大小，请检查文档或检查元素并检查类在DOM中。

Bootstrap Grid System

如果您希望col-size以特定的屏幕宽度堆叠，这就是您可以做的。

如果屏幕是sm，你希望它们能够叠加，

<div class="row">
  <div class="col-sm-12">
     <p>My text here will be on this row alone.</p>
   </div>
 <div class="col-sm-12">
     <p>My text here will be on this row alone.</p>
   </div>
 <div class="col-sm-12">
     <p>My text here will be on this row alone.</p>
   </div>
</div> <!-- end of row -->

这将堆叠在sm大小上，因为当屏幕是sm大小的宽度时，它将占用12，这是整个空间。因此，媒体查询将启动，col将占据整行。

记住你也可以堆叠每个班级。因此，如果你想确保每个col堆栈以md开头，你可以这样做，

<div class="col-xs-12 col-sm-12 col-md-12 ">

现在，当浏览器处于每个类目标宽度时，无论html是什么，div都会占用整行。

Bootstrap 3代码无法按预期工作

1 个答案: