Question

我在引导程序4列表中有一些按钮，我设置为btn-block但由于某种原因，最后一个按钮比其他按钮宽一些。我不确定为什么因为添加的CSS不会改变宽度或任何东西。有线索吗？在附加的图片中，它是Instagram按钮。代码将在图像下方。

<header class="construction-header">
  <div class="container">
    <div class="construction-message">
      <h1><img src="http://jessetoxik.com/img/header/logo/logo_temp.png"></h1>
      <h3 class="fjalla">Webpage Coming Soon</h3>
      <h3 class="release fjalla"></h3>
      <hr class="construction-divider">
      <ul class="list-inline construction-social-buttons fjalla">
        <li class="list-inline-item">
          <a href="https://example.com" class="btn btn-secondary btn-lg btn-drk btn-block">
            <i class="fa fa-twitter fa-fw"></i>
            <span class="network-name">Twitter</span>
          </a>
        </li>
        <li class="list-inline-item">
          <a href="https://www.example.com/" class="btn btn-secondary btn-lg btn-drk btn-block">
            <i class="fa fa-facebook fa-fw"></i>
            <span class="network-name">Facebook</span>
          </a>
        </li>
        <li class="list-inline-item">
          <a href="https://www.example.com" class="btn btn-secondary btn-lg btn-drk btn-block">
            <i class="fa fa-instagram fa-fw"></i>
            <span class="network-name">Instagram</span>
          </a>
        </li>
      </ul>
    </div>
  </div>
</header>


body, html {
  width: 100%;
  height: 100%;
}

body, h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  text-shadow:
   -1px -1px 0 #000,  
    1px -1px 0 #000,
    -1px 1px 0 #000,
     1px 1px 0 #000!important;
}

.construction-header {
  padding-top: 50px;
  padding-bottom: 50px;
  text-align: center;
  height: 100%;
  color: #f8f8f8;
  background: url('imagesrc') no-repeat center center;
  background-size: cover;
}

.construction-message {
  position: relative;
  padding-top: 20%;
  padding-bottom: 20%;
}

.construction-message>h1 {
  margin: 0;
  text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
  font-size: 5em;
}

.construction-divider {
  width: 400px;
  border-top: 1px solid #f8f8f8;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

.construction-message>h3 {
  text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
}

.construction-social-buttons i {
  font-size: 80%;
}

@media(max-width:767px) {
  .construction-message {
    padding-bottom: 15%;
  }
  .construction-message>h1 {
    font-size: 3em;
  }
  ul.construction-social-buttons>li {
    display: block;
    margin-bottom: 20px;
    padding: 0;
  }
  ul.construction-social-buttons>li:last-child {
    margin-bottom: 0;
  }
  .construction-divider {
    width: 100%;
  }
}
.btn-drk {
   background-color: #232323!important;
}

Answer 1

如果没有看到工作样本，就很难正确测试。我找到的另一种方法是使用Bootstrap的Grid而不是.list-inline来安排按钮。它提供了单行显示的所有灵活性，而不是基于设备宽度的堆叠。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css" rel="stylesheet">

<div class="container">
  <div class="row">
    <div class="col-12 col-sm-4 my-2">
      <a href="https://example.com" class="btn btn-secondary btn-lg btn-drk btn-block"><i class="fa fa-twitter fa-fw"></i><span class="network-name">Twitter</span></a>
    </div>
           
    <div class="col-12 col-sm-4 my-2">
      <a href="https://www.example.com/" class="btn btn-secondary btn-lg btn-drk btn-block"><i class="fa fa-facebook fa-fw"></i><span class="network-name">Facebook</span></a>
    </div>
      
    <div class="col-12 col-sm-4 my-2">
      <a href="https://www.example.com" class="btn btn-secondary btn-lg btn-drk btn-block"><i class="fa fa-instagram fa-fw"></i><span class="network-name">Instagram</span></a>
    </div>
  </div>
</div>

Bootstrap 4个不均匀的按钮

1 个答案: