为什么我的 bootstrap 行没有在一行中显示所有 3 列,如屏幕截图所示
Why is my bootstrap row not showing all 3 of the columns on one line as shown in screenshot
在 phone 屏幕上,它们应该看起来像下面的屏幕截图
Image
如屏幕截图所示,我正在谈论的行和列用黑色圆圈圈出,当我在检查元素上停用行>* 的“宽度”时,它按预期工作。下面是正常勾选“width”时的截图。
What I want to fix
这是我的HTML
<div class="about-content-container">
<div class="row my-row g-0">
<div class="col-sm-12 col-md-12 col-lg-6 d-flex justify-content-center">
<img src="/images/Typing-bro.svg" alt="">
</div>
<div class="col-sm-12 col-md-12 col-lg-6 d-flex justify-content-center align-items-center">
<div class="container">
<div class="row d-flex justify-content-center">
<div class="col-sm-4 col-md-3 col-lg-3">
<div class="my-card d-flex justify-content-center align-items-center">
<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 1024 1024" height="1.5em" width="1.5em"
xmlns="http://www.w3.org/2000/svg">
<path
d="M145.2 96l66 746.6L512 928l299.6-85.4L878.9 96H145.2zm595 177.1l-4.8 47.2-1.7 19.5H382.3l8.2 94.2h335.1l-3.3 24.3-21.2 242.2-1.7 16.2-187 51.6v.3h-1.2l-.3.1v-.1h-.1l-188.6-52L310.8 572h91.1l6.5 73.2 102.4 27.7h.4l102-27.6 11.4-118.6H510.9v-.1H306l-22.8-253.5-1.7-24.3h460.3l-1.6 24.3z">
</path>
</svg>
</div>
</div>
<div class="col-sm-4 col-md-3 col-lg-3">
<div class="my-card d-flex justify-content-center align-items-center">
<svg stroke="currentColor" fill="currentColor" stroke-width="0" version="1.1" viewBox="0 0 32 32" height="1.5em"
width="1.4em" xmlns="http://www.w3.org/2000/svg">
<path
d="M16.017 21.044v0zM4.743 3.519l2.049 22.981 9.194 2.552 9.22-2.556 2.051-22.977h-22.514zM23 8.775l-0.693 7.767h-0l-0.48 5.359-0.042 0.476-5.781 1.603-5.773-1.603-0.395-4.426h2.829l0.201 2.248 3.142 0.847 0.008-0.002 0.002-0 3.134-0.846 0.329-3.655-6.579 0-0.056-0.633-0.129-1.429-0.067-0.756 7.081-0 0.258-2.886h-10.786l-0.056-0.634-0.129-1.429-0.067-0.756h14.118l-0.068 0.756z">
</path>
</svg>
</div>
</div>
<div class="col-sm-4 col-md-3 col-lg-3">
<div class="my-card d-flex justify-content-center align-items-center">
<svg stroke="currentColor" fill="currentColor" stroke-width="0" version="1.1" viewBox="0 0 32 32" height="1.5em"
width="1.5em" xmlns="http://www.w3.org/2000/svg">
<path
d="M31.641 21.161c-0.109-0.911-0.578-1.618-1.286-2.172-0.82-0.641-1.78-0.905-2.803-0.947-0.834-0.034-1.65 0.090-2.437 0.376-0.224 0.081-0.444 0.177-0.67 0.268-0.030-0.055-0.062-0.107-0.088-0.162-0.232-0.474-0.512-0.927-0.573-1.47-0.044-0.386-0.098-0.772-0.006-1.153 0.088-0.367 0.204-0.728 0.312-1.091 0.056-0.187 0.017-0.291-0.161-0.375-0.062-0.029-0.129-0.055-0.197-0.065-0.438-0.063-0.869-0.027-1.293 0.096-0.15 0.044-0.259 0.128-0.292 0.294-0.019 0.095-0.058 0.186-0.084 0.28-0.111 0.391-0.189 0.789-0.368 1.161-0.449 0.934-0.96 1.832-1.485 2.724-0.057 0.096-0.116 0.191-0.188 0.308-0.184-0.385-0.38-0.73-0.44-1.136-0.067-0.458-0.12-0.915-0.006-1.37 0.085-0.339 0.196-0.672 0.298-1.006 0.049-0.159 0.026-0.242-0.118-0.326-0.073-0.042-0.155-0.080-0.237-0.092-0.454-0.067-0.901-0.032-1.338 0.11-0.136 0.044-0.207 0.132-0.249 0.272-0.122 0.413-0.226 0.836-0.397 1.229-0.694 1.59-1.407 3.172-2.12 4.753-0.149 0.33-0.323 0.649-0.491 0.97-0.043 0.082-0.104 0.153-0.157 0.23-0.043-0.050-0.059-0.085-0.059-0.119 0.001-0.203-0.023-0.413 0.016-0.609 0.117-0.594 0.252-1.186 0.395-1.775 0.117-0.486 0.254-0.968 0.385-1.452 0.044-0.162 0.045-0.313-0.072-0.449-0.195-0.228-0.603-0.278-0.845-0.102-0.026 0.019-0.057 0.032-0.107 0.061 0.009-0.077 0.014-0.125 0.021-0.173 0.051-0.37 0.061-0.738-0.040-1.103-0.127-0.454-0.45-0.715-0.921-0.701-0.22 0.007-0.45 0.044-0.653 0.124-0.855 0.335-1.512 0.928-2.071 1.642-0.051 0.065-0.118 0.124-0.189 0.163-0.723 0.401-1.449 0.797-2.174 1.195-0.271 0.148-0.542 0.297-0.807 0.442-0.216-0.207-0.413-0.421-0.637-0.603-0.682-0.556-1.375-1.098-2.061-1.648-0.608-0.487-1.198-0.995-1.649-1.64-0.336-0.48-0.552-1.005-0.572-1.599-0.026-0.756 0.188-1.447 0.573-2.091 0.493-0.823 1.164-1.483 1.903-2.082 0.781-0.633 1.626-1.17 2.502-1.66 1.225-0.686 2.486-1.293 3.837-1.694 1.386-0.411 2.791-0.646 4.241-0.482 0.57 0.064 1.123 0.195 1.632 0.474 0.389 0.213 0.708 0.492 0.857 0.929 0.146 0.43 0.142 0.865 0.040 1.301-0.206 0.883-0.69 1.612-1.299 2.263-0.998 1.067-2.216 1.793-3.588 2.273-0.791 0.277-1.605 0.451-2.441 0.521-0.682 0.057-1.35-0.003-1.996-0.241-0.428-0.157-0.8-0.398-1.1-0.747-0.054-0.063-0.122-0.13-0.222-0.072-0.098 0.057-0.115 0.151-0.082 0.245 0.055 0.157 0.105 0.319 0.191 0.459 0.214 0.351 0.527 0.606 0.871 0.825 0.661 0.42 1.399 0.561 2.165 0.594 1.162 0.050 2.296-0.123 3.413-0.435 1.596-0.445 2.983-1.231 4.096-2.471 0.927-1.032 1.588-2.198 1.73-3.605 0.069-0.687-0.004-1.36-0.326-1.986-0.349-0.679-0.903-1.147-1.566-1.494-0.964-0.506-2.006-0.705-3.081-0.763-0.359-0-0.718-0-1.077-0-1.303 0.063-2.562 0.337-3.786 0.782-0.926 0.337-1.835 0.717-2.717 1.157-1.921 0.96-3.71 2.108-5.179 3.699-0.732 0.793-1.352 1.663-1.708 2.693-0.104 0.302-0.168 0.622-0.243 0.934-0.006 0.026 0.023 0.051-0.041 0.077 0 0.147 0 0.293 0 0.44 0.064 0.113 0.071 0.225 0.1 0.338 0.189 0.733 0.578 1.363 1.060 1.937 0.687 0.818 1.518 1.476 2.38 2.096 0.747 0.537 1.505 1.062 2.255 1.595 0.129 0.091 0.248 0.197 0.388 0.309-0.12 0.065-0.221 0.122-0.325 0.175-0.99 0.502-1.942 1.065-2.82 1.747-0.529 0.411-1.041 0.848-1.402 1.418-0.581 0.918-0.787 1.896-0.354 2.94 0.127 0.305 0.32 0.569 0.592 0.763 0.088 0.063 0.187 0.126 0.29 0.15 0.264 0.062 0.534 0.103 0.802 0.152 0.253-0 0.505-0 0.758-0 0.839-0.075 1.602-0.362 2.291-0.838 1.078-0.744 1.804-1.741 2.117-3.022 0.227-0.93 0.236-1.862-0.031-2.788-0.025-0.086-0.056-0.17-0.089-0.253s-0.071-0.164-0.116-0.268c0.572-0.329 1.146-0.659 1.719-0.989 0.009 0.007 0.017 0.015 0.026 0.022-0.031 0.102-0.064 0.204-0.093 0.308-0.204 0.746-0.34 1.505-0.291 2.279 0.052 0.825 0.282 1.597 0.765 2.287 0.39 0.558 1.321 0.578 1.736 0.019 0.147-0.199 0.29-0.406 0.397-0.628 0.28-0.579 0.54-1.168 0.807-1.753 0.012-0.025 0.022-0.050 0.047-0.107-0.019 0.277-0.042 0.52-0.052 0.764-0.016 0.38 0.006 0.758 0.136 1.12 0.111 0.31 0.3 0.541 0.655 0.581 0.242 0.028 0.436-0.083 0.614-0.224 0.279-0.22 0.505-0.491 0.673-0.8 0.475-0.873 0.963-1.74 1.394-2.635 0.466-0.968 0.873-1.964 1.306-2.948 0.024-0.054 0.045-0.109 0.072-0.175 0.102 0.402 0.174 0.795 0.305 1.168 0.152 0.432 0.341 0.854 0.547 1.264 0.097 0.194 0.086 0.32-0.049 0.482-0.564 0.68-1.118 1.368-1.673 2.056-0.123 0.152-0.245 0.306-0.347 0.472-0.062 0.101-0.103 0.223-0.12 0.341-0.033 0.225 0.105 0.441 0.346 0.493 0.219 0.047 0.453 0.065 0.677 0.048 0.774-0.057 1.477-0.329 2.099-0.789 0.805-0.597 1.064-1.41 0.869-2.375-0.053-0.262-0.146-0.517-0.237-0.769-0.041-0.114-0.043-0.194 0.031-0.3 0.644-0.919 1.194-1.895 1.705-2.892 0.020-0.039 0.041-0.079 0.076-0.121 0.166 0.863 0.415 1.694 0.862 2.448-0.228 0.22-0.454 0.419-0.658 0.639-0.45 0.483-0.84 1.009-1.043 1.649-0.087 0.276-0.155 0.556-0.116 0.852 0.061 0.458 0.436 0.755 0.886 0.651 0.963-0.223 1.795-0.677 2.403-1.481 0.409-0.541 0.446-1.145 0.275-1.778-0.047-0.172-0.103-0.341-0.163-0.539 0.238-0.074 0.47-0.162 0.709-0.217 1.245-0.284 2.476-0.234 3.675 0.215 0.7 0.262 1.266 0.702 1.601 1.393 0.41 0.845 0.183 1.646-0.613 2.18-0.074 0.050-0.159 0.089-0.221 0.151-0.038 0.038-0.060 0.115-0.051 0.167 0.005 0.031 0.087 0.069 0.133 0.069 0.262-0.002 0.474-0.139 0.678-0.28 0.511-0.353 0.848-0.829 0.928-1.454 0.002-0.018-0.024-0.035 0.040-0.052 0-0.139 0-0.277 0-0.416-0.064-0.017-0.037-0.034-0.039-0.052zM7.286 22.851c-0.083 1.115-0.588 2.019-1.414 2.75-0.465 0.412-0.997 0.705-1.618 0.808-0.225 0.037-0.455 0.046-0.674-0.047-0.311-0.133-0.381-0.409-0.387-0.704-0.009-0.469 0.155-0.893 0.38-1.296 0.294-0.526 0.725-0.927 1.185-1.301 0.725-0.59 1.512-1.090 2.317-1.561 0.013-0.008 0.029-0.012 0.061-0.025 0.124 0.46 0.184 0.914 0.149 1.377zM13.576 18.006c-0.059 0.356-0.132 0.712-0.236 1.057-0.36 1.194-0.821 2.352-1.32 3.493-0.092 0.211-0.226 0.404-0.343 0.604-0.018 0.031-0.045 0.058-0.071 0.084-0.144 0.143-0.282 0.135-0.355-0.052-0.085-0.217-0.137-0.449-0.182-0.679-0.030-0.154-0.023-0.316-0.032-0.474 0.010-1.123 0.352-2.145 0.934-3.095 0.24-0.392 0.501-0.765 0.899-1.014 0.123-0.076 0.26-0.137 0.399-0.177 0.212-0.060 0.343 0.039 0.308 0.252zM17.867 23.473c0.514-0.6 1.027-1.199 1.542-1.801 0.064 0.669-1.072 2.004-1.542 1.801zM22.793 22.262c-0.109 0.062-0.228 0.108-0.34 0.165-0.102 0.053-0.136-0-0.139-0.088-0.002-0.060 0.007-0.122 0.023-0.18 0.208-0.735 0.591-1.361 1.162-1.871 0.008-0.008 0.021-0.011 0.040-0.021 0.271 0.758-0.042 1.592-0.747 1.995z">
</path>
</svg>
</div>
</div>
</div>
<div class="row mt-4 d-flex justify-content-center">
<div class="col-md-3 col-lg-3">
<div class="my-card d-flex justify-content-center align-items-center">
<svg stroke="currentColor" fill="currentColor" stroke-width="0" role="img" viewBox="0 0 24 24" height="1.2em" width="1.2em"
xmlns="http://www.w3.org/2000/svg">
<title></title>
<path
d="M0 0h24v24H0V0zm22.034 18.276c-.175-1.095-.888-2.015-3.003-2.873-.736-.345-1.554-.585-1.797-1.14-.091-.33-.105-.51-.046-.705.15-.646.915-.84 1.515-.66.39.12.75.42.976.9 1.034-.676 1.034-.676 1.755-1.125-.27-.42-.404-.601-.586-.78-.63-.705-1.469-1.065-2.834-1.034l-.705.089c-.676.165-1.32.525-1.71 1.005-1.14 1.291-.811 3.541.569 4.471 1.365 1.02 3.361 1.244 3.616 2.205.24 1.17-.87 1.545-1.966 1.41-.811-.18-1.26-.586-1.755-1.336l-1.83 1.051c.21.48.45.689.81 1.109 1.74 1.756 6.09 1.666 6.871-1.004.029-.09.24-.705.074-1.65l.046.067zm-8.983-7.245h-2.248c0 1.938-.009 3.864-.009 5.805 0 1.232.063 2.363-.138 2.711-.33.689-1.18.601-1.566.48-.396-.196-.597-.466-.83-.855-.063-.105-.11-.196-.127-.196l-1.825 1.125c.305.63.75 1.172 1.324 1.517.855.51 2.004.675 3.207.405.783-.226 1.458-.691 1.811-1.411.51-.93.402-2.07.397-3.346.012-2.054 0-4.109 0-6.179l.004-.056z">
</path>
</svg>
</div>
</div>
<div class="col-md-3 col-lg-3">
<div class="my-card d-flex justify-content-center align-items-center">
<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" height="1.4em" width="1.4em"
xmlns="http://www.w3.org/2000/svg">
<path
d="M224 508c-6.7 0-13.5-1.8-19.4-5.2l-61.7-36.5c-9.2-5.2-4.7-7-1.7-8 12.3-4.3 14.8-5.2 27.9-12.7 1.4-.8 3.2-.5 4.6.4l47.4 28.1c1.7 1 4.1 1 5.7 0l184.7-106.6c1.7-1 2.8-3 2.8-5V149.3c0-2.1-1.1-4-2.9-5.1L226.8 37.7c-1.7-1-4-1-5.7 0L36.6 144.3c-1.8 1-2.9 3-2.9 5.1v213.1c0 2 1.1 4 2.9 4.9l50.6 29.2c27.5 13.7 44.3-2.4 44.3-18.7V167.5c0-3 2.4-5.3 5.4-5.3h23.4c2.9 0 5.4 2.3 5.4 5.3V378c0 36.6-20 57.6-54.7 57.6-10.7 0-19.1 0-42.5-11.6l-48.4-27.9C8.1 389.2.7 376.3.7 362.4V149.3c0-13.8 7.4-26.8 19.4-33.7L204.6 9c11.7-6.6 27.2-6.6 38.8 0l184.7 106.7c12 6.9 19.4 19.8 19.4 33.7v213.1c0 13.8-7.4 26.7-19.4 33.7L243.4 502.8c-5.9 3.4-12.6 5.2-19.4 5.2zm149.1-210.1c0-39.9-27-50.5-83.7-58-57.4-7.6-63.2-11.5-63.2-24.9 0-11.1 4.9-25.9 47.4-25.9 37.9 0 51.9 8.2 57.7 33.8.5 2.4 2.7 4.2 5.2 4.2h24c1.5 0 2.9-.6 3.9-1.7s1.5-2.6 1.4-4.1c-3.7-44.1-33-64.6-92.2-64.6-52.7 0-84.1 22.2-84.1 59.5 0 40.4 31.3 51.6 81.8 56.6 60.5 5.9 65.2 14.8 65.2 26.7 0 20.6-16.6 29.4-55.5 29.4-48.9 0-59.6-12.3-63.2-36.6-.4-2.6-2.6-4.5-5.3-4.5h-23.9c-3 0-5.3 2.4-5.3 5.3 0 31.1 16.9 68.2 97.8 68.2 58.4-.1 92-23.2 92-63.4z">
</path>
</svg>
</div>
</div>
<div class=" col-md-3 col-lg-3">
<div class="my-card d-flex justify-content-center align-items-center">
<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1.5em" width="1.5em"
xmlns="http://www.w3.org/2000/svg">
<path
d="M12 2c-4 0-8 .5-8 4v9.5C4 17.43 5.57 19 7.5 19L6 20.5v.5h2.23l2-2H14l2 2h2v-.5L16.5 19c1.93 0 3.5-1.57 3.5-3.5V6c0-3.5-3.58-4-8-4zM7.5 17c-.83 0-1.5-.67-1.5-1.5S6.67 14 7.5 14s1.5.67 1.5 1.5S8.33 17 7.5 17zm3.5-7H6V6h5v4zm2 0V6h5v4h-5zm3.5 7c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z">
</path>
</svg>
</div>
</div>
</div>
<div class="row mt-4 d-flex justify-content-center ">
<div class="col-md-3 col-lg-3">
<div class="my-card d-flex justify-content-center align-items-center">
<svg stroke="currentColor" fill="currentColor" stroke-width="0" role="img" viewBox="0 0 24 24" height="1.4em" width="1.4em"
xmlns="http://www.w3.org/2000/svg">
<title></title>
<path
d="M17.18 9.518c-1.263-5.56-4.242-7.387-4.562-8.086C12.266.939 11.885 0 11.885 0c-.002.019-.004.031-.005.049v.013h-.001c-.002.015-.003.025-.004.039v.015h-.002c0 .01-.002.018-.002.026v.026h-.003c-.001.008-.001.018-.003.025v.021h-.002c0 .007 0 .015-.002.021v.02h-.002c0 .01-.001.022-.002.032v.002c-.003.017-.006.034-.009.05v.008h-.002c-.001.004-.003.008-.003.012v.017h-.003v.022h-.005v.018h-.005v.021h-.004v.019h-.004v.017h-.006v.014h-.004v.018h-.004v.014h-.005v.013H11.8v.015h-.004c-.001.001-.001.003-.001.004v.01h-.003c-.001.002-.001.004-.001.006v.006h-.002c-.001.003-.002.008-.002.01-.003.007-.007.014-.01.021v.002c-.002.002-.004.005-.005.007v.008h-.004v.008h-.005v.008h-.003v.01h-.006v.014h-.004v.004h-.004v.008h-.004v.011h-.004v.008h-.006v.011h-.004v.008h-.005v.008h-.003v.01h-.005v.008h-.004v.006h-.004v.008h-.006V.76h-.004v.006h-.005v.008h-.004v.011h-.005v.004h-.003v.008h-.006v.004h-.004v.01h-.004v.004h-.004v.008h-.005v.006h-.003l-.002.004v.004h-.002c-.001.002-.002.002-.002.004v.001h-.001c-.001.003-.002.005-.004.007v.003h-.001c-.005.006-.008.012-.012.018v.001c-.002.002-.007.006-.009.01v.002h-.001c-.001.001-.003.002-.003.003v.003h-.002l-.003.003v.001h-.001c0 .001-.002.002-.003.004v.004h-.003l-.002.002v.002h-.002c0 .002-.002.002-.002.003v.003h-.004c0 .001-.001.002-.002.003V.92h-.003v.004h-.004V.93h-.004v.008h-.005V.93h-.005v.004h-.004V.94h-.005v.008h-.005v.004h-.004v.006h-.004v.004h-.004V.97h-.006v.004h-.004V.98h-.005v.004h-.004v.005h-.005v.01h-.002v.004h-.006v.005h-.004v.002h-.004v.004h-.005v.01h-.004v.004h-.005v.004h-.004v.006h-.005v.004h-.005v.004h-.004v.004h-.004v.01h-.004v.005h-.006v.004h-.004v.004h-.005v.006h-.004v.004h-.005v.007h-.004v.004h-.006V1.1h-.002v.004h-.004v.004h-.005v.004h-.004v.006h-.005v.004h-.003c-.001.001-.001.002-.001.002v.002h-.002l-.004.004s-.002.002-.004.003v.006h-.004v.005h-.004v.004h-.004v.004h-.003l-.003.003v.003h-.002l-.002.002v.003h-.002c-.005.006-.007.01-.014.016-.002.002-.008.007-.012.01-.012.008-.027.021-.039.032-.008.005-.016.012-.022.017v.001h-.001c-.016.013-.031.025-.049.039v.001c-.024.02-.047.039-.074.062V1.34h-.002c-.057.047-.117.1-.186.159V1.5h-.001c-.169.148-.37.338-.595.568l-.015.015-.004.004C9 3.494 6.857 6.426 6.631 11.164c-.02.392-.016.773.006 1.144v.009c.109 1.867.695 3.461 1.428 4.756v.001c.292.516.607.985.926 1.405v.001c1.102 1.455 2.227 2.317 2.514 2.526.441 1.023.4 2.779.4 2.779l.644.215s-.131-1.701.053-2.522c.057-.257.192-.476.349-.662.106-.075.42-.301.797-.645.018-.019.028-.036.044-.054 1.521-1.418 4.362-4.91 3.388-10.599z">
</path>
</svg>
</div>
</div>
<div class="col-md-3 col-lg-3">
<div class="my-card d-flex justify-content-center align-items-center">
<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 1024 1024" height="1.4em" width="1.4em"
xmlns="http://www.w3.org/2000/svg">
<path
d="M511.6 76.3C264.3 76.2 64 276.4 64 523.5 64 718.9 189.3 885 363.8 946c23.5 5.9 19.9-10.8 19.9-22.2v-77.5c-135.7 15.9-141.2-73.9-150.3-88.9C215 726 171.5 718 184.5 703c30.9-15.9 62.4 4 98.9 57.9 26.4 39.1 77.9 32.5 104 26 5.7-23.5 17.9-44.5 34.7-60.8-140.6-25.2-199.2-111-199.2-213 0-49.5 16.3-95 48.3-131.7-20.4-60.5 1.9-112.3 4.9-120 58.1-5.2 118.5 41.6 123.2 45.3 33-8.9 70.7-13.6 112.9-13.6 42.4 0 80.2 4.9 113.5 13.9 11.3-8.6 67.3-48.8 121.3-43.9 2.9 7.7 24.7 58.3 5.5 118 32.4 36.8 48.9 82.7 48.9 132.3 0 102.2-59 188.1-200 212.9a127.5 127.5 0 0 1 38.1 91v112.5c.8 9 0 17.9 15 17.9 177.1-59.7 304.6-227 304.6-424.1 0-247.2-200.4-447.3-447.5-447.3z">
</path>
</svg>
</div>
</div>
<div class="col-md-3 col-lg-3">
<div class="my-card d-flex justify-content-center align-items-center">
<svg stroke="currentColor" fill="none" stroke-width="0" viewBox="0 0 24 24" height="1.3em" width="1.3em"
xmlns="http://www.w3.org/2000/svg">
<path
d="M8.5 2C6.84315 2 5.5 3.34315 5.5 5C5.5 6.65685 6.84315 8 8.5 8H15.5C17.1569 8 18.5 6.65685 18.5 5C18.5 3.34315 17.1569 2 15.5 2H8.5Z"
fill="currentColor"></path>
<path
d="M15.5 9C13.8431 9 12.5 10.3431 12.5 12C12.5 13.6569 13.8431 15 15.5 15C17.1569 15 18.5 13.6569 18.5 12C18.5 10.3431 17.1569 9 15.5 9Z"
fill="currentColor"></path>
<path d="M5.5 12C5.5 10.3431 6.84315 9 8.5 9H11.5V15H8.5C6.84315 15 5.5 13.6569 5.5 12Z" fill="currentColor"></path>
<path
d="M8.5 16C6.84315 16 5.5 17.3431 5.5 19C5.5 20.6569 6.84315 22 8.5 22C10.1569 22 11.5 20.6569 11.5 19V16H8.5Z"
fill="currentColor"></path>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
我的CSS
@media (max-width: 390px) {
.main-column:nth-child(2) {
margin-top: -2rem;
}
.person-img {
height: 90%;
width: 95%;
}
.about-me {
margin-top: 0rem;
}
/* What I do section */
.about-desc {
width: 80%;
text-align: center;
}
}
还有一件事,当我将“row>*”的宽度设置为 0 时,一切都消失了。我将不胜感激任何帮助 !谢谢 !一直在努力解决这个问题。
将 col-4
添加到每个 div 是 svg 父项的父项:
<div class="row d-flex justify-content-center">
<div class="col-4 col-sm-4 col-md-3 col-lg-3">
<div class="my-card d-flex justify-content-center align-items-center">
<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 1024 1024" height="1.5em" width="1.5em" xmlns="http://www.w3.org/2000/svg">
<path d="M145.2 96l66 746.6L512 928l299.6-85.4L878.9 96H145.2zm595 177.1l-4.8 47.2-1.7 19.5H382.3l8.2 94.2h335.1l-3.3 24.3-21.2 242.2-1.7 16.2-187 51.6v.3h-1.2l-.3.1v-.1h-.1l-188.6-52L310.8 572h91.1l6.5 73.2 102.4 27.7h.4l102-27.6 11.4-118.6H510.9v-.1H306l-22.8-253.5-1.7-24.3h460.3l-1.6 24.3z">
</path>
</svg>
</div>
</div>
<div class="col-4 col-sm-4 col-md-3 col-lg-3">
<div class="my-card d-flex justify-content-center align-items-center">
<svg ...
在 phone 屏幕上,它们应该看起来像下面的屏幕截图 Image
如屏幕截图所示,我正在谈论的行和列用黑色圆圈圈出,当我在检查元素上停用行>* 的“宽度”时,它按预期工作。下面是正常勾选“width”时的截图。
What I want to fix
这是我的HTML
<div class="about-content-container">
<div class="row my-row g-0">
<div class="col-sm-12 col-md-12 col-lg-6 d-flex justify-content-center">
<img src="/images/Typing-bro.svg" alt="">
</div>
<div class="col-sm-12 col-md-12 col-lg-6 d-flex justify-content-center align-items-center">
<div class="container">
<div class="row d-flex justify-content-center">
<div class="col-sm-4 col-md-3 col-lg-3">
<div class="my-card d-flex justify-content-center align-items-center">
<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 1024 1024" height="1.5em" width="1.5em"
xmlns="http://www.w3.org/2000/svg">
<path
d="M145.2 96l66 746.6L512 928l299.6-85.4L878.9 96H145.2zm595 177.1l-4.8 47.2-1.7 19.5H382.3l8.2 94.2h335.1l-3.3 24.3-21.2 242.2-1.7 16.2-187 51.6v.3h-1.2l-.3.1v-.1h-.1l-188.6-52L310.8 572h91.1l6.5 73.2 102.4 27.7h.4l102-27.6 11.4-118.6H510.9v-.1H306l-22.8-253.5-1.7-24.3h460.3l-1.6 24.3z">
</path>
</svg>
</div>
</div>
<div class="col-sm-4 col-md-3 col-lg-3">
<div class="my-card d-flex justify-content-center align-items-center">
<svg stroke="currentColor" fill="currentColor" stroke-width="0" version="1.1" viewBox="0 0 32 32" height="1.5em"
width="1.4em" xmlns="http://www.w3.org/2000/svg">
<path
d="M16.017 21.044v0zM4.743 3.519l2.049 22.981 9.194 2.552 9.22-2.556 2.051-22.977h-22.514zM23 8.775l-0.693 7.767h-0l-0.48 5.359-0.042 0.476-5.781 1.603-5.773-1.603-0.395-4.426h2.829l0.201 2.248 3.142 0.847 0.008-0.002 0.002-0 3.134-0.846 0.329-3.655-6.579 0-0.056-0.633-0.129-1.429-0.067-0.756 7.081-0 0.258-2.886h-10.786l-0.056-0.634-0.129-1.429-0.067-0.756h14.118l-0.068 0.756z">
</path>
</svg>
</div>
</div>
<div class="col-sm-4 col-md-3 col-lg-3">
<div class="my-card d-flex justify-content-center align-items-center">
<svg stroke="currentColor" fill="currentColor" stroke-width="0" version="1.1" viewBox="0 0 32 32" height="1.5em"
width="1.5em" xmlns="http://www.w3.org/2000/svg">
<path
d="M31.641 21.161c-0.109-0.911-0.578-1.618-1.286-2.172-0.82-0.641-1.78-0.905-2.803-0.947-0.834-0.034-1.65 0.090-2.437 0.376-0.224 0.081-0.444 0.177-0.67 0.268-0.030-0.055-0.062-0.107-0.088-0.162-0.232-0.474-0.512-0.927-0.573-1.47-0.044-0.386-0.098-0.772-0.006-1.153 0.088-0.367 0.204-0.728 0.312-1.091 0.056-0.187 0.017-0.291-0.161-0.375-0.062-0.029-0.129-0.055-0.197-0.065-0.438-0.063-0.869-0.027-1.293 0.096-0.15 0.044-0.259 0.128-0.292 0.294-0.019 0.095-0.058 0.186-0.084 0.28-0.111 0.391-0.189 0.789-0.368 1.161-0.449 0.934-0.96 1.832-1.485 2.724-0.057 0.096-0.116 0.191-0.188 0.308-0.184-0.385-0.38-0.73-0.44-1.136-0.067-0.458-0.12-0.915-0.006-1.37 0.085-0.339 0.196-0.672 0.298-1.006 0.049-0.159 0.026-0.242-0.118-0.326-0.073-0.042-0.155-0.080-0.237-0.092-0.454-0.067-0.901-0.032-1.338 0.11-0.136 0.044-0.207 0.132-0.249 0.272-0.122 0.413-0.226 0.836-0.397 1.229-0.694 1.59-1.407 3.172-2.12 4.753-0.149 0.33-0.323 0.649-0.491 0.97-0.043 0.082-0.104 0.153-0.157 0.23-0.043-0.050-0.059-0.085-0.059-0.119 0.001-0.203-0.023-0.413 0.016-0.609 0.117-0.594 0.252-1.186 0.395-1.775 0.117-0.486 0.254-0.968 0.385-1.452 0.044-0.162 0.045-0.313-0.072-0.449-0.195-0.228-0.603-0.278-0.845-0.102-0.026 0.019-0.057 0.032-0.107 0.061 0.009-0.077 0.014-0.125 0.021-0.173 0.051-0.37 0.061-0.738-0.040-1.103-0.127-0.454-0.45-0.715-0.921-0.701-0.22 0.007-0.45 0.044-0.653 0.124-0.855 0.335-1.512 0.928-2.071 1.642-0.051 0.065-0.118 0.124-0.189 0.163-0.723 0.401-1.449 0.797-2.174 1.195-0.271 0.148-0.542 0.297-0.807 0.442-0.216-0.207-0.413-0.421-0.637-0.603-0.682-0.556-1.375-1.098-2.061-1.648-0.608-0.487-1.198-0.995-1.649-1.64-0.336-0.48-0.552-1.005-0.572-1.599-0.026-0.756 0.188-1.447 0.573-2.091 0.493-0.823 1.164-1.483 1.903-2.082 0.781-0.633 1.626-1.17 2.502-1.66 1.225-0.686 2.486-1.293 3.837-1.694 1.386-0.411 2.791-0.646 4.241-0.482 0.57 0.064 1.123 0.195 1.632 0.474 0.389 0.213 0.708 0.492 0.857 0.929 0.146 0.43 0.142 0.865 0.040 1.301-0.206 0.883-0.69 1.612-1.299 2.263-0.998 1.067-2.216 1.793-3.588 2.273-0.791 0.277-1.605 0.451-2.441 0.521-0.682 0.057-1.35-0.003-1.996-0.241-0.428-0.157-0.8-0.398-1.1-0.747-0.054-0.063-0.122-0.13-0.222-0.072-0.098 0.057-0.115 0.151-0.082 0.245 0.055 0.157 0.105 0.319 0.191 0.459 0.214 0.351 0.527 0.606 0.871 0.825 0.661 0.42 1.399 0.561 2.165 0.594 1.162 0.050 2.296-0.123 3.413-0.435 1.596-0.445 2.983-1.231 4.096-2.471 0.927-1.032 1.588-2.198 1.73-3.605 0.069-0.687-0.004-1.36-0.326-1.986-0.349-0.679-0.903-1.147-1.566-1.494-0.964-0.506-2.006-0.705-3.081-0.763-0.359-0-0.718-0-1.077-0-1.303 0.063-2.562 0.337-3.786 0.782-0.926 0.337-1.835 0.717-2.717 1.157-1.921 0.96-3.71 2.108-5.179 3.699-0.732 0.793-1.352 1.663-1.708 2.693-0.104 0.302-0.168 0.622-0.243 0.934-0.006 0.026 0.023 0.051-0.041 0.077 0 0.147 0 0.293 0 0.44 0.064 0.113 0.071 0.225 0.1 0.338 0.189 0.733 0.578 1.363 1.060 1.937 0.687 0.818 1.518 1.476 2.38 2.096 0.747 0.537 1.505 1.062 2.255 1.595 0.129 0.091 0.248 0.197 0.388 0.309-0.12 0.065-0.221 0.122-0.325 0.175-0.99 0.502-1.942 1.065-2.82 1.747-0.529 0.411-1.041 0.848-1.402 1.418-0.581 0.918-0.787 1.896-0.354 2.94 0.127 0.305 0.32 0.569 0.592 0.763 0.088 0.063 0.187 0.126 0.29 0.15 0.264 0.062 0.534 0.103 0.802 0.152 0.253-0 0.505-0 0.758-0 0.839-0.075 1.602-0.362 2.291-0.838 1.078-0.744 1.804-1.741 2.117-3.022 0.227-0.93 0.236-1.862-0.031-2.788-0.025-0.086-0.056-0.17-0.089-0.253s-0.071-0.164-0.116-0.268c0.572-0.329 1.146-0.659 1.719-0.989 0.009 0.007 0.017 0.015 0.026 0.022-0.031 0.102-0.064 0.204-0.093 0.308-0.204 0.746-0.34 1.505-0.291 2.279 0.052 0.825 0.282 1.597 0.765 2.287 0.39 0.558 1.321 0.578 1.736 0.019 0.147-0.199 0.29-0.406 0.397-0.628 0.28-0.579 0.54-1.168 0.807-1.753 0.012-0.025 0.022-0.050 0.047-0.107-0.019 0.277-0.042 0.52-0.052 0.764-0.016 0.38 0.006 0.758 0.136 1.12 0.111 0.31 0.3 0.541 0.655 0.581 0.242 0.028 0.436-0.083 0.614-0.224 0.279-0.22 0.505-0.491 0.673-0.8 0.475-0.873 0.963-1.74 1.394-2.635 0.466-0.968 0.873-1.964 1.306-2.948 0.024-0.054 0.045-0.109 0.072-0.175 0.102 0.402 0.174 0.795 0.305 1.168 0.152 0.432 0.341 0.854 0.547 1.264 0.097 0.194 0.086 0.32-0.049 0.482-0.564 0.68-1.118 1.368-1.673 2.056-0.123 0.152-0.245 0.306-0.347 0.472-0.062 0.101-0.103 0.223-0.12 0.341-0.033 0.225 0.105 0.441 0.346 0.493 0.219 0.047 0.453 0.065 0.677 0.048 0.774-0.057 1.477-0.329 2.099-0.789 0.805-0.597 1.064-1.41 0.869-2.375-0.053-0.262-0.146-0.517-0.237-0.769-0.041-0.114-0.043-0.194 0.031-0.3 0.644-0.919 1.194-1.895 1.705-2.892 0.020-0.039 0.041-0.079 0.076-0.121 0.166 0.863 0.415 1.694 0.862 2.448-0.228 0.22-0.454 0.419-0.658 0.639-0.45 0.483-0.84 1.009-1.043 1.649-0.087 0.276-0.155 0.556-0.116 0.852 0.061 0.458 0.436 0.755 0.886 0.651 0.963-0.223 1.795-0.677 2.403-1.481 0.409-0.541 0.446-1.145 0.275-1.778-0.047-0.172-0.103-0.341-0.163-0.539 0.238-0.074 0.47-0.162 0.709-0.217 1.245-0.284 2.476-0.234 3.675 0.215 0.7 0.262 1.266 0.702 1.601 1.393 0.41 0.845 0.183 1.646-0.613 2.18-0.074 0.050-0.159 0.089-0.221 0.151-0.038 0.038-0.060 0.115-0.051 0.167 0.005 0.031 0.087 0.069 0.133 0.069 0.262-0.002 0.474-0.139 0.678-0.28 0.511-0.353 0.848-0.829 0.928-1.454 0.002-0.018-0.024-0.035 0.040-0.052 0-0.139 0-0.277 0-0.416-0.064-0.017-0.037-0.034-0.039-0.052zM7.286 22.851c-0.083 1.115-0.588 2.019-1.414 2.75-0.465 0.412-0.997 0.705-1.618 0.808-0.225 0.037-0.455 0.046-0.674-0.047-0.311-0.133-0.381-0.409-0.387-0.704-0.009-0.469 0.155-0.893 0.38-1.296 0.294-0.526 0.725-0.927 1.185-1.301 0.725-0.59 1.512-1.090 2.317-1.561 0.013-0.008 0.029-0.012 0.061-0.025 0.124 0.46 0.184 0.914 0.149 1.377zM13.576 18.006c-0.059 0.356-0.132 0.712-0.236 1.057-0.36 1.194-0.821 2.352-1.32 3.493-0.092 0.211-0.226 0.404-0.343 0.604-0.018 0.031-0.045 0.058-0.071 0.084-0.144 0.143-0.282 0.135-0.355-0.052-0.085-0.217-0.137-0.449-0.182-0.679-0.030-0.154-0.023-0.316-0.032-0.474 0.010-1.123 0.352-2.145 0.934-3.095 0.24-0.392 0.501-0.765 0.899-1.014 0.123-0.076 0.26-0.137 0.399-0.177 0.212-0.060 0.343 0.039 0.308 0.252zM17.867 23.473c0.514-0.6 1.027-1.199 1.542-1.801 0.064 0.669-1.072 2.004-1.542 1.801zM22.793 22.262c-0.109 0.062-0.228 0.108-0.34 0.165-0.102 0.053-0.136-0-0.139-0.088-0.002-0.060 0.007-0.122 0.023-0.18 0.208-0.735 0.591-1.361 1.162-1.871 0.008-0.008 0.021-0.011 0.040-0.021 0.271 0.758-0.042 1.592-0.747 1.995z">
</path>
</svg>
</div>
</div>
</div>
<div class="row mt-4 d-flex justify-content-center">
<div class="col-md-3 col-lg-3">
<div class="my-card d-flex justify-content-center align-items-center">
<svg stroke="currentColor" fill="currentColor" stroke-width="0" role="img" viewBox="0 0 24 24" height="1.2em" width="1.2em"
xmlns="http://www.w3.org/2000/svg">
<title></title>
<path
d="M0 0h24v24H0V0zm22.034 18.276c-.175-1.095-.888-2.015-3.003-2.873-.736-.345-1.554-.585-1.797-1.14-.091-.33-.105-.51-.046-.705.15-.646.915-.84 1.515-.66.39.12.75.42.976.9 1.034-.676 1.034-.676 1.755-1.125-.27-.42-.404-.601-.586-.78-.63-.705-1.469-1.065-2.834-1.034l-.705.089c-.676.165-1.32.525-1.71 1.005-1.14 1.291-.811 3.541.569 4.471 1.365 1.02 3.361 1.244 3.616 2.205.24 1.17-.87 1.545-1.966 1.41-.811-.18-1.26-.586-1.755-1.336l-1.83 1.051c.21.48.45.689.81 1.109 1.74 1.756 6.09 1.666 6.871-1.004.029-.09.24-.705.074-1.65l.046.067zm-8.983-7.245h-2.248c0 1.938-.009 3.864-.009 5.805 0 1.232.063 2.363-.138 2.711-.33.689-1.18.601-1.566.48-.396-.196-.597-.466-.83-.855-.063-.105-.11-.196-.127-.196l-1.825 1.125c.305.63.75 1.172 1.324 1.517.855.51 2.004.675 3.207.405.783-.226 1.458-.691 1.811-1.411.51-.93.402-2.07.397-3.346.012-2.054 0-4.109 0-6.179l.004-.056z">
</path>
</svg>
</div>
</div>
<div class="col-md-3 col-lg-3">
<div class="my-card d-flex justify-content-center align-items-center">
<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" height="1.4em" width="1.4em"
xmlns="http://www.w3.org/2000/svg">
<path
d="M224 508c-6.7 0-13.5-1.8-19.4-5.2l-61.7-36.5c-9.2-5.2-4.7-7-1.7-8 12.3-4.3 14.8-5.2 27.9-12.7 1.4-.8 3.2-.5 4.6.4l47.4 28.1c1.7 1 4.1 1 5.7 0l184.7-106.6c1.7-1 2.8-3 2.8-5V149.3c0-2.1-1.1-4-2.9-5.1L226.8 37.7c-1.7-1-4-1-5.7 0L36.6 144.3c-1.8 1-2.9 3-2.9 5.1v213.1c0 2 1.1 4 2.9 4.9l50.6 29.2c27.5 13.7 44.3-2.4 44.3-18.7V167.5c0-3 2.4-5.3 5.4-5.3h23.4c2.9 0 5.4 2.3 5.4 5.3V378c0 36.6-20 57.6-54.7 57.6-10.7 0-19.1 0-42.5-11.6l-48.4-27.9C8.1 389.2.7 376.3.7 362.4V149.3c0-13.8 7.4-26.8 19.4-33.7L204.6 9c11.7-6.6 27.2-6.6 38.8 0l184.7 106.7c12 6.9 19.4 19.8 19.4 33.7v213.1c0 13.8-7.4 26.7-19.4 33.7L243.4 502.8c-5.9 3.4-12.6 5.2-19.4 5.2zm149.1-210.1c0-39.9-27-50.5-83.7-58-57.4-7.6-63.2-11.5-63.2-24.9 0-11.1 4.9-25.9 47.4-25.9 37.9 0 51.9 8.2 57.7 33.8.5 2.4 2.7 4.2 5.2 4.2h24c1.5 0 2.9-.6 3.9-1.7s1.5-2.6 1.4-4.1c-3.7-44.1-33-64.6-92.2-64.6-52.7 0-84.1 22.2-84.1 59.5 0 40.4 31.3 51.6 81.8 56.6 60.5 5.9 65.2 14.8 65.2 26.7 0 20.6-16.6 29.4-55.5 29.4-48.9 0-59.6-12.3-63.2-36.6-.4-2.6-2.6-4.5-5.3-4.5h-23.9c-3 0-5.3 2.4-5.3 5.3 0 31.1 16.9 68.2 97.8 68.2 58.4-.1 92-23.2 92-63.4z">
</path>
</svg>
</div>
</div>
<div class=" col-md-3 col-lg-3">
<div class="my-card d-flex justify-content-center align-items-center">
<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1.5em" width="1.5em"
xmlns="http://www.w3.org/2000/svg">
<path
d="M12 2c-4 0-8 .5-8 4v9.5C4 17.43 5.57 19 7.5 19L6 20.5v.5h2.23l2-2H14l2 2h2v-.5L16.5 19c1.93 0 3.5-1.57 3.5-3.5V6c0-3.5-3.58-4-8-4zM7.5 17c-.83 0-1.5-.67-1.5-1.5S6.67 14 7.5 14s1.5.67 1.5 1.5S8.33 17 7.5 17zm3.5-7H6V6h5v4zm2 0V6h5v4h-5zm3.5 7c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z">
</path>
</svg>
</div>
</div>
</div>
<div class="row mt-4 d-flex justify-content-center ">
<div class="col-md-3 col-lg-3">
<div class="my-card d-flex justify-content-center align-items-center">
<svg stroke="currentColor" fill="currentColor" stroke-width="0" role="img" viewBox="0 0 24 24" height="1.4em" width="1.4em"
xmlns="http://www.w3.org/2000/svg">
<title></title>
<path
d="M17.18 9.518c-1.263-5.56-4.242-7.387-4.562-8.086C12.266.939 11.885 0 11.885 0c-.002.019-.004.031-.005.049v.013h-.001c-.002.015-.003.025-.004.039v.015h-.002c0 .01-.002.018-.002.026v.026h-.003c-.001.008-.001.018-.003.025v.021h-.002c0 .007 0 .015-.002.021v.02h-.002c0 .01-.001.022-.002.032v.002c-.003.017-.006.034-.009.05v.008h-.002c-.001.004-.003.008-.003.012v.017h-.003v.022h-.005v.018h-.005v.021h-.004v.019h-.004v.017h-.006v.014h-.004v.018h-.004v.014h-.005v.013H11.8v.015h-.004c-.001.001-.001.003-.001.004v.01h-.003c-.001.002-.001.004-.001.006v.006h-.002c-.001.003-.002.008-.002.01-.003.007-.007.014-.01.021v.002c-.002.002-.004.005-.005.007v.008h-.004v.008h-.005v.008h-.003v.01h-.006v.014h-.004v.004h-.004v.008h-.004v.011h-.004v.008h-.006v.011h-.004v.008h-.005v.008h-.003v.01h-.005v.008h-.004v.006h-.004v.008h-.006V.76h-.004v.006h-.005v.008h-.004v.011h-.005v.004h-.003v.008h-.006v.004h-.004v.01h-.004v.004h-.004v.008h-.005v.006h-.003l-.002.004v.004h-.002c-.001.002-.002.002-.002.004v.001h-.001c-.001.003-.002.005-.004.007v.003h-.001c-.005.006-.008.012-.012.018v.001c-.002.002-.007.006-.009.01v.002h-.001c-.001.001-.003.002-.003.003v.003h-.002l-.003.003v.001h-.001c0 .001-.002.002-.003.004v.004h-.003l-.002.002v.002h-.002c0 .002-.002.002-.002.003v.003h-.004c0 .001-.001.002-.002.003V.92h-.003v.004h-.004V.93h-.004v.008h-.005V.93h-.005v.004h-.004V.94h-.005v.008h-.005v.004h-.004v.006h-.004v.004h-.004V.97h-.006v.004h-.004V.98h-.005v.004h-.004v.005h-.005v.01h-.002v.004h-.006v.005h-.004v.002h-.004v.004h-.005v.01h-.004v.004h-.005v.004h-.004v.006h-.005v.004h-.005v.004h-.004v.004h-.004v.01h-.004v.005h-.006v.004h-.004v.004h-.005v.006h-.004v.004h-.005v.007h-.004v.004h-.006V1.1h-.002v.004h-.004v.004h-.005v.004h-.004v.006h-.005v.004h-.003c-.001.001-.001.002-.001.002v.002h-.002l-.004.004s-.002.002-.004.003v.006h-.004v.005h-.004v.004h-.004v.004h-.003l-.003.003v.003h-.002l-.002.002v.003h-.002c-.005.006-.007.01-.014.016-.002.002-.008.007-.012.01-.012.008-.027.021-.039.032-.008.005-.016.012-.022.017v.001h-.001c-.016.013-.031.025-.049.039v.001c-.024.02-.047.039-.074.062V1.34h-.002c-.057.047-.117.1-.186.159V1.5h-.001c-.169.148-.37.338-.595.568l-.015.015-.004.004C9 3.494 6.857 6.426 6.631 11.164c-.02.392-.016.773.006 1.144v.009c.109 1.867.695 3.461 1.428 4.756v.001c.292.516.607.985.926 1.405v.001c1.102 1.455 2.227 2.317 2.514 2.526.441 1.023.4 2.779.4 2.779l.644.215s-.131-1.701.053-2.522c.057-.257.192-.476.349-.662.106-.075.42-.301.797-.645.018-.019.028-.036.044-.054 1.521-1.418 4.362-4.91 3.388-10.599z">
</path>
</svg>
</div>
</div>
<div class="col-md-3 col-lg-3">
<div class="my-card d-flex justify-content-center align-items-center">
<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 1024 1024" height="1.4em" width="1.4em"
xmlns="http://www.w3.org/2000/svg">
<path
d="M511.6 76.3C264.3 76.2 64 276.4 64 523.5 64 718.9 189.3 885 363.8 946c23.5 5.9 19.9-10.8 19.9-22.2v-77.5c-135.7 15.9-141.2-73.9-150.3-88.9C215 726 171.5 718 184.5 703c30.9-15.9 62.4 4 98.9 57.9 26.4 39.1 77.9 32.5 104 26 5.7-23.5 17.9-44.5 34.7-60.8-140.6-25.2-199.2-111-199.2-213 0-49.5 16.3-95 48.3-131.7-20.4-60.5 1.9-112.3 4.9-120 58.1-5.2 118.5 41.6 123.2 45.3 33-8.9 70.7-13.6 112.9-13.6 42.4 0 80.2 4.9 113.5 13.9 11.3-8.6 67.3-48.8 121.3-43.9 2.9 7.7 24.7 58.3 5.5 118 32.4 36.8 48.9 82.7 48.9 132.3 0 102.2-59 188.1-200 212.9a127.5 127.5 0 0 1 38.1 91v112.5c.8 9 0 17.9 15 17.9 177.1-59.7 304.6-227 304.6-424.1 0-247.2-200.4-447.3-447.5-447.3z">
</path>
</svg>
</div>
</div>
<div class="col-md-3 col-lg-3">
<div class="my-card d-flex justify-content-center align-items-center">
<svg stroke="currentColor" fill="none" stroke-width="0" viewBox="0 0 24 24" height="1.3em" width="1.3em"
xmlns="http://www.w3.org/2000/svg">
<path
d="M8.5 2C6.84315 2 5.5 3.34315 5.5 5C5.5 6.65685 6.84315 8 8.5 8H15.5C17.1569 8 18.5 6.65685 18.5 5C18.5 3.34315 17.1569 2 15.5 2H8.5Z"
fill="currentColor"></path>
<path
d="M15.5 9C13.8431 9 12.5 10.3431 12.5 12C12.5 13.6569 13.8431 15 15.5 15C17.1569 15 18.5 13.6569 18.5 12C18.5 10.3431 17.1569 9 15.5 9Z"
fill="currentColor"></path>
<path d="M5.5 12C5.5 10.3431 6.84315 9 8.5 9H11.5V15H8.5C6.84315 15 5.5 13.6569 5.5 12Z" fill="currentColor"></path>
<path
d="M8.5 16C6.84315 16 5.5 17.3431 5.5 19C5.5 20.6569 6.84315 22 8.5 22C10.1569 22 11.5 20.6569 11.5 19V16H8.5Z"
fill="currentColor"></path>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
我的CSS
@media (max-width: 390px) {
.main-column:nth-child(2) {
margin-top: -2rem;
}
.person-img {
height: 90%;
width: 95%;
}
.about-me {
margin-top: 0rem;
}
/* What I do section */
.about-desc {
width: 80%;
text-align: center;
}
}
还有一件事,当我将“row>*”的宽度设置为 0 时,一切都消失了。我将不胜感激任何帮助 !谢谢 !一直在努力解决这个问题。
将 col-4
添加到每个 div 是 svg 父项的父项:
<div class="row d-flex justify-content-center">
<div class="col-4 col-sm-4 col-md-3 col-lg-3">
<div class="my-card d-flex justify-content-center align-items-center">
<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 1024 1024" height="1.5em" width="1.5em" xmlns="http://www.w3.org/2000/svg">
<path d="M145.2 96l66 746.6L512 928l299.6-85.4L878.9 96H145.2zm595 177.1l-4.8 47.2-1.7 19.5H382.3l8.2 94.2h335.1l-3.3 24.3-21.2 242.2-1.7 16.2-187 51.6v.3h-1.2l-.3.1v-.1h-.1l-188.6-52L310.8 572h91.1l6.5 73.2 102.4 27.7h.4l102-27.6 11.4-118.6H510.9v-.1H306l-22.8-253.5-1.7-24.3h460.3l-1.6 24.3z">
</path>
</svg>
</div>
</div>
<div class="col-4 col-sm-4 col-md-3 col-lg-3">
<div class="my-card d-flex justify-content-center align-items-center">
<svg ...