Question

我正在尝试使用flex正确对齐按钮。

在桌面上看起来像我想要的：

手机上的人像也是如此：

但是在风景中，它看起来像这样：

我希望它看起来更对齐。

这是我这部分的代码：

.row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.col {
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -ms-flex-positive: 1;
  flex-grow: 1;
}

<div>
  <div class="row">
    <div class="btnWrap col" style="">
      <button type="button" id="TopNames" class="btn btn-secondary btn-top active" onclick="topButtonClick(this)">Najpogostejša imena</button>
    </div>
    <div class="btnWrap col" style="">
      <button type="button" id="TopBabyNames" class="btn btn-secondary btn-top" onclick="topButtonClick(this)">Imena novorojenčkov</button>
    </div>
    <div class="btnWrap col" style="">
      <button type="button" id="TopDisappearingNames" class="btn btn-secondary btn-top" onclick="topButtonClick(this)">Izginjajoča imena</button>
    </div>
    <div class="btnWrap col" style="">
      <button type="button" id="TopModernNames" class="btn btn-secondary btn-top" onclick="topButtonClick(this)">Sodobna imena</button>
    </div>
    <div class="btnWrap col" style="">
      <button type="button" id="TopLastnames" class="btn btn-secondary btn-top" onclick="topButtonClick(this)">Najpogostejši priimki</button>
    </div>
  </div>
</div>

Answer 1

这是您的html的样式：

<div class="button-wrapper">
   <button>Name</button>
   <button>Name</button>
   <button>Name</button>
   <button>Name</button>
   <button>Name</button>
</div>

这是台式机的CSS：

.button-wrapper{
  display:flex;
  align-items:center;
  justify-content: space-between;
  flex-direction: row;
 }

这是移动的CSS：

.button-wrapper{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
 }

Answer 2

无需在此处添加额外的CSS属性，而无需使用引导程序类

flutter

Answer 3

请查看下面的代码段。添加引导程序类以达到期望的结果

.btnWrap{
margin-top:10px
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container-fluid">
    <div class="row justify-content-center text-center">
        <div class="btnWrap col-12 col-lg" >
            <button type="button" id="TopNames" class="btn btn-secondary btn-top active" onclick="topButtonClick(this)">Najpogostejša imena</button>
        </div>
        <div class="btnWrap col-12 col-lg" >
            <button type="button" id="TopBabyNames" class="btn btn-secondary btn-top" onclick="topButtonClick(this)">Imena novorojenčkov</button>
        </div>
        <div class="btnWrap col-12 col-lg" >
            <button type="button" id="TopDisappearingNames" class="btn btn-secondary btn-top" onclick="topButtonClick(this)">Izginjajoča imena</button>
        </div>
        <div class="btnWrap col-12 col-lg" >
            <button type="button" id="TopModernNames" class="btn btn-secondary btn-top" onclick="topButtonClick(this)">Sodobna imena</button>
        </div>
        <div class="btnWrap col-12 col-lg" >
            <button type="button" id="TopLastnames" class="btn btn-secondary btn-top" onclick="topButtonClick(this)">Najpogostejši priimki</button>
        </div>
    </div>
</div>

CSS Flex对齐按钮

3 个答案: