英文:
Bootstrap width class/attribute not working
问题
在下面的代码片段中，通过使用Chrome开发工具检查，可以看到divWithNoWidthSet元素没有设置其width属性，尽管它具有w-80和/或mw-80类。我可以在生成的源代码中看到class属性，但在检查面板中没有width属性存在。
我在Stack Overflow 上看到过一些帖子，类似的行为原因是div元素包含一个具有img-fluid类的图像，但在这里不是这种情况。任何帮助都将不胜感激 - 谢谢！
<div className="m-auto w-30 rounded d-block" style={{ height: '300px', backgroundColor: 'whitesmoke' }}>
<div style={{ height: '150px' }}>
<a href={...} target="_blank" rel="noopener"><img src={...`} className="img-fluid h-150 hm-150 mw-50 d-block m-auto" alt={...} /></a>
</div>
<a href={...} target="_blank" rel="noopener">
<div id="divWithNoWidthSet" className="w-80 mw-80 text-center m-auto p-3" style={{border: '1px solid red'}}>
<h5>{...}</h5>
<p>{...}</p>
</div>
</a>
</div>
英文:
Using bootstrap 4.5 (with NextJS 11.1 on ReactJS 18.2)
In the below snippet, per inspection with Chrome dev tools, the divWithNoWidthSet div is not getting its width attribute set despite having w-80 and/or mw-80 class. I can see the class attribute in generated source, but no width attribute exists in the inspection panel.
I saw posts on SO where the cause of similar behavior was the div containing an image with img-fluid class, but such is not the case here. Any help appreciated--thanks!
<div className="m-auto w-30 rounded d-block" style={{ height: '300px', backgroundColor: 'whitesmoke'}} >
<div style={{ height: '150px'}} >
<a href={...} target="_blank" rel="noopener"><img src={...`} className="img-fluid h-150 hm-150 mw-50 d-block m-auto" alt={...} /> </a>
</div>
<a href={...} target="_blank" rel="noopener">
<div id="divWithNoWidthSet" className="w-80 mw-80 text-center m-auto p-3" style={{border: '1px solid red'}}>
<h5>{...}</h5>
<p>{...}</p>
</div>
</a>
</div>
答案1
得分: 1
根据Bootstrap官方网站上的说明：
宽度和高度工具是从
_variables.scss中的$sizesSass映射生成的。默认情况下，支持25%、50%、75%、100%和auto。根据需要修改这些值以生成不同的工具。
如果您想使用w-80类，则需要将其添加到_variables.scss中。默认情况下，没有w-80类。
英文:
As stated on official Bootstrap website:
> Width and height utilities are generated from the $sizes Sass map in
> _variables.scss. Includes support for 25%, 50%, 75%, 100%, and auto by default. Modify those values as you need to generate different
> utilities here.
If you want to use the class w-80 then you need to add it in _variables.scss. By default, there's no w-80 class.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论