如何使按钮宽度跟随基于文本的最大宽度按钮？

Question

如何使我的所有按钮都跟随基于文本的较大宽度的宽度？

按钮动态生成，文本将基于数据库中的数据。那么我希望它们在 UI 上具有相同的大小。

这可能吗？如果是。怎么样？

这是我的按钮：

@foreach($buttons as $button)
 <button class="btn col-lg-2 col-md-3 col-sm-4 text-center btn-button button{{$button->parent_id}} hide" type="button" onclick="buttonFunction('button{{$button->id}}'"  style="background-color: #69C1DA;">
  <input type="radio" class="hide" name="type" value="{{$button->id}}" id="button{{$button->id}}">
  <span>{{$button->name}}</span>
 </button>
@endforeach

这是我的按钮的用户界面

如您所见，文本不适合。我可以使按钮比现在更大，但我不知道什么时候一个词会出现在数据库中，它大到不再适合它。

提前致谢。

Answer 1

如果是我 - 我会忘记尝试使用 boostrap 列并简单地使用 css 设置宽度。

这可以在纯 javascript 中完成（尤其是使用 document.querySelectorAll() 选择器 - 但由于您使用的是 jquery - 这是方法 -

遍历按钮并通过将每个按钮的宽度与最大宽度进行比较来找到最大宽度，如果它大于最大宽度 - 将该宽度设置为最大宽度。

然后将所有按钮设置为 maxWidth 并且瞧——所有按钮的宽度都与文本最长的按钮的宽度相同。

请注意，我仅为此 sn-p 删除了您的一些代码 - 并将样式移到 css 块中 - 使用外部 css 总是比每个按钮的内联更好。如果你想为不同的按钮设置不同的样式 - 应用具有不同样式的不同类。

let maxWidth = 0;

$('.btn').each(function(){
 const width = parseFloat($(this).css('width'));
 if(width > maxWidth) {maxWidth = width}
})

$('.btn').css('width', maxWidth +'px');

.btn {
  background-color: #69C1DA;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn text-center btn-button button{{$button->parent_id}} hide" type="button">

  <span>text</span>
 </button>
  <button class="btn text-center btn-button button{{$button->parent_id}} hide" type="button">
  <span>longer text</span>
 </button>
  <button class="btn text-center btn-button button{{$button->parent_id}} hide" type="button" onclick="buttonFunction('button{{$button->id}}'">
  <span> very very long text</span>
 </button>
   <button class="btn text-center btn-button button{{$button->parent_id}} hide" type="button">
  <span>short text</span>
 </button>

Answer 2

实际上有一种简单的方法可以使用 jQuery 以最少的代码来做到这一点。

您可以将此解决方案修改为get the largest button width and apply that width to all。

$(document).ready(function() {
  
  $.fn.widest = function() {
    return this.length ? this.width(Math.max.apply(Math, this.map(function() { 
        return $(this).width();
    }))) : this;
	};
  
    $('.buttons').widest();
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="buttons" >One</button>
<button class="buttons" >Twooooo</button>
<button class="buttons" >Three Four Five Six Seven Eight</button>

ps：在网站上，他们提供了一个解决方案，其中涉及点击获取宽度，所以像我的代码一样修改它，你删除 click 函数 并在 中调用该代码准备功能。

这将确保您的按钮始终采用最大的按钮宽度值并将其应用于所有其他按钮。

Answer 3

答案已经在这里，但我添加了这个以获取有关使用 grid 和自定义属性的信息。

元素可以在几行上换行，但宽度相同，下面是演示。

var bigW = '0';
for (let e of document.querySelectorAll('.btn')) {
  elW = e.offsetWidth;
  if (elW > bigW) {
    bigW = elW;
  }
  document.documentElement.style.setProperty("--myW", bigW + 'px');// update column's width //
}

div {
  display: grid;
  grid-template-columns: repeat(auto-fill, var(--myW)); /* custom properie here to size the columns */
  justify-content: center;/* center them for a better visual*/
}

button {
  white-space: nowrap;  /* we need this */
}

<div>
  <button class="btn">some more text </button>
  <button class="btn">text </button>
  <button class="btn">some bits of text </button>
  <button class="btn">Lorem Ipsum</button>
  <button class="btn">some loooooonnnng text </button>
  <button class="btn">some some text </button>
  <button class="btn">some text </button>
  <button class="btn">some text </button>
  <button class="btn">some text </button>
  <button class="btn">some text </button>
  <button class="btn">some text </button>
  <button class="btn">some text </button>
  <button class="btn">some text </button>
  <button class="btn">some text </button>
  <button class="btn">some text </button>
  <button class="btn">some text </button>
</div>

这是一支笔可以用来叉子或玩https://codepen.io/gc-nomade/pen/GRJovXZ

免责声明：要求浏览器支持 CSS 网格布局 和 自定义属性/CSS 变量 (--*:value)

https://developer.mozilla.org/en-US/docs/Web/CSS/--*

以-- 为前缀的属性名称，如--example-name，表示包含可在其他声明中使用var() 函数的值的自定义属性。

---

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

CSS 网格布局擅长将页面划分为主要区域，或根据大小、位置和层定义由 HTML 基元构建的控件各部分之间的关​​系。

支持信息可以在http://caniuse.com找到

Answer 4

如我所见，您需要在所有按钮内容更新后设置宽度。所以，你可以用Javascript检查最大宽度，并根据它改变按钮的宽度属性。

let buttons = document.querySelectorAll('.btn');
let maxWidth = 0;

for (let i = 0; i < buttons.length; i++)
{
  // You need to check the maximum value of all
  if (maxWidth < buttons[i].offsetWidth) maxWidth = buttons[i].offsetWidth;
}

for (let i = 0; i < buttons.length; i++)
{
  // You set the width to the max plus the padding left and right
  buttons[i].style.width = maxWidth + 40 + 'px';
}

// This was the maximum width
document.querySelector('p').innerHTML = maxWidth + 40 + 'px';

.btn
{
  width: fit-content;
  padding: 8px 20px;
  font-size: 16px;
  border: 1px solid blueviolet;
  color: white;
  background-color: blueviolet;
  margin: 1vmin 2vmin;
  cursor: pointer;
  transition: 0.3s ease;
}
.btn:hover
{
  color: blueviolet;
  background-color: transparent;
 }

<button class='btn'>
  This is a button
</button>
<button class='btn'>
  Ok, you shoud click this!
</button>
<button class='btn'>
  Click here!
</button>
<button class='btn'>
  Learn more
</button>
<button class='btn'>
  Come here, buddy!
</button>
<button class='btn'>
  What a button
</button>
<p>
</p>