Html CSS引导设置横向和纵向按钮宽度

我希望在一个容器中设置多个宽度相等的按钮。我还想让按钮调整大小时，它在横向模式或更宽的屏幕。我怎样才能做到这一点

我想达到的目标如下

但当我把它换回Potrait时我得到了什么

代码在JSFIDLE中

.卡片{
边框：0px实心；
位置：相对位置；
高度：200px；
背景：url（“https://preview.ibb.co/kJvJ5e/1847p.png）无重复上止点；
背景尺寸：封面；
}
.卡img{
宽度：100%；
}
.搜索框{
位置：绝对位置；
显示：内联块；
底部：-30px；
左：0；
右：0；
填充：15px；
文本对齐：居中；
}
.投下阴影{
-webkit盒阴影：0 0 2px2pRGBA（0,0,0,5）；
盒影：0 0 10px 1px rgb（211、211、211、0.8）；
边界半径：0px；
}
.容器液体{
宽度：自动
}
.container-fluid.drop-shadow{
利润率最高：2%；
左缘：5%；
保证金权利：5%
}
#孩子{
宽度：100%；
高度：20px；
保证金：自动；
文本对齐：居中；
边缘顶端：40px；
}
.表格组{
宽度：100%；
边缘底部：10px；
}
.btn签入{
显示：内联块；
文本对齐：居中；
空白：nowrap；
颜色：#fff；
边框颜色：#EC008c；
文本转换：大写；
背景色：#EC008c；
字体系列：'opensans'，'Helvetica Neue'，Arial，Sans serif；
填充：0.375rem.75rem；
字体大小：13px；
边界半径：.25rem；
}
.图标插件{
位置：相对位置；
}
.图标附加标签{
位置：绝对位置；
左：2px；
顶部：2个；
填充：8px；
字体大小：20px；
}
.图标加载项输入{
高度：40px；
左侧填充：35px；
}
.当前位置{
职位：-网络工具包粘性；
位置：粘性；
右：20px
}
.包裹{
宽度：100%；
高度：50px；
填充顶部：10px；
垫底：10px；
文本对齐：居中；
}
钮扣{
左边距：15px；
显示：内联块；
文本对齐：居中；
空白：nowrap；
颜色：#000000；
边框颜色：#B9E5fB；
文本转换：大写；
背景色：#B9E5fB；
字体系列：'opensans'，'Helvetica Neue'，Arial，Sans serif；
填充：10px 10px；
字体大小：13px；
边界半径：10px；
宽度：20%；
}
按钮：第一个孩子{
左边距：0；
} 
登记入住
当前位置
个人训练
罢工
计划时间
全部的
早晨
下午
傍晚
明天
本周

结果仍然不起作用？请帮忙

---

您可以使用引导网格来实现您的目标。将按钮包装在引导列中，如下所示。这将创建宽度相等的列，并且按钮位于每列中

<div class="row">
  <div class="col"> <button class="mybtn"> All </button> </div>
  <div class="col"> <button class="mybtn">Morning</button> </div>
  <div class="col"> <button class="mybtn">Afternoon</button> </div>
</div>

---

阅读更多信息

对于中型设备使用

col-md-4

，对于小型设备使用

col-sm-4

，对于超小型设备使用

col-xs-4

试试这个链接

---

要按您想要的方式设置按钮，您需要将其宽度限制在任何屏幕大小中都不超过总宽度的33.33%。为此，您需要使用父

行

div，并将每个按钮包装在

列

div内，如下面的代码所示

<div class="wrap"> 
  <div class="row">
  <div class="col">
    <button>Button 1</button>  
  </div>    
  <div class="col">
    <button>Button 2</button>
  </div>
  <div class="col"> 
    <button>Button 3</button>
  </div>    
</div>

请检查提供的

.mybtn
{
  margin:0 5px;
}

<div class="wrap"> 
  <div class="row">
  <div class="col">
    <button>Button 1</button>  
  </div>    
  <div class="col">
    <button>Button 2</button>
  </div>
  <div class="col"> 
    <button>Button 3</button>
  </div>    
</div>

.wrap {
    width: 250px;
    height: 50px;
    padding: 25px;
    text-align: center;
    display: inline-block;
    width:100%;
}
.col{padding:0 5px;display:inline-block;width:33.33%;}
.row{margin:0 -5px;}  /* Customized the .row class of bootstrap */
button{
    margin:5px 0; /* to undo your older style */
    width:100%;
    text-overflow: ellipsis;    
    white-space:nowrap;
    overflow:hidden;
}
 button:first-child{
    margin:5px 0;  /* to undo your older style */
}