مشکل در انجام یک پروژ ه با bootstrap
سلام وقت بخیر. من یک پروژه از سایت فرانت اند منتور برداشتم که باید با css, html انجام بشه ولی من می خوام با bootstrap انجامش بدم. حالا نمی تونم عرض یکی از containerها رو تغییر بدم. هر کاری می کنم نمیشه از استک اور فلو هم نتیجه نگرفتم. میشه لطفا به کدهام نگاهی بندازید؟
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://fonts.google.com/specimen/Hanken+Grotesk" rel="stylesheet">
</head>
<body>
<div class="container-fluid d-flex px-5 bg-info rounded-4" style="width: 260px; height: 380px;margin-top: 10% ;">
<div class="row">
<div class="col-md-8 p-3">
<h6 class="text-secondary text-center pt-4">Your Result</h6>
<div class="container text-center bg-primary rounded-circle mt-3" style="width: 150px; height: 150px;">
<h2 class="text-white pt-4">76</h2>
<h6 class="text-muted px-3">of 100</h6>
</div>
<div class="container-fluid mt-3" style="width: 110%;">
<h3 class="text-white text-center">Great</h3>
<h6 class="text-white text-center">You scored higher than 65% of people who have taken these tests.</h6>
</div>
</div>
</div>
<div class="container-fluid text-bg-light rounded-4" style="width: 200%; height: 100%; margin-inline-start: 30%;">
<div class="col-md-8 p-3">
<h6>Summary</h6>
</div>
<div class="container-fluid">
<h6>Reaction 80/100</h6>
</div>
</div>
</div>
</body>
</html></body></html>
پاسخ‌ها
3
سلام
دوست عزیز سعی کنید با انجام دادن این چالش ها مهارت تان در css و html و js بالا ببرید و سراغ هیچ ابزار یا کتابخانه و یا فریمورک نرید وقتی css را تا یک اندازه خوب یاد گرفتید به راحتی میتونید کتابخانه و یا فریمورک هاش شخصی سازی کنید و معمولا کتابخانه و یا فریمورک ها استایل هایی تعریف شده در چارچوپ خود دارند و انجام چنین چالش هایی نیاز شخصی سازی اون ابزار را داره .
- همچنین رنگ و فونت و اندازه ها را طبق چیزهایی که تو فایل style-guide.md تعریف شده انتخاب کنید.
- این لینک یک چند تا چالش از سایت فرانت اند منتور است که قبلا انجام دادم با اینسپکت کردن میتونید نگاهی به کدها بندازید شاید بدرتان خورد.
https://www.frontendmentor.io/profile/MousaAzm/solutions
درود خوبی...
container جایگزین container-fluid کنید که برابر با 1140 پیکسل میشه...
درود بر شما.سپاسگذارم. اینکار رو هم انجام دادم فایده ای نداشته. کلاس colرو مقدارش رو تغییر دادم باز هم نشده...
گفتگوهای مرتبط
شاید پاسخ شما همین‌جا باشد