#html #css #twitter-bootstrap
#HTML #css #twitter-bootstrap
Вопрос:
Я следил за этим руководством на YouTube, и когда пришло время просмотреть мою работу и выровнять текст по значкам по горизонтали, они остались сложенными. Какой альтернативный способ использовать сеточную систему bootstraps для выравнивания их по горизонтали вместо того, чтобы накладывать друг на друга? Я не понимаю, как исправить этот беспорядок, кажется, руководство было больше для программистов среднего уровня.
body {
font-size: 15px;
font-family: arial,helveitca,sans-serif;
padding: 0;
margin: 0;
background-color: #dcdde1;
}
.container{
width:80%;
margin: auto;
overflow: hidden;
}
ul{
margin: 0;
padding: 0;
}
/* ------------ header ---------- */
header {
background: #7f8fa6;
color: #ffffff;
padding-top: 30px;
min-height: 70px;
border-bottom: #192a56 3px solid;
}
header a{
color:#ffffff;
text-decoration:none;
text-transform: uppercase;
font-size:16px;
}
header li {
float:left;
display:inline;
padding: 0 20px 0 20px;
}
header #branding {
float:left;
}
header #branding h1 {
margin: 0;
}
header nav {
float:right;
margin-top:10px;
}
header .highlight, header .current a {
color: #40739e;
font-weight: bold;
}
header a:hover{
color:#cccccc;
font-weight: bold;
}
/*-----------showcase------------*/
#showcase {
min-height: 400px;
background:url(../images/laptop.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
text-align: center;
color:white;
}
#showcase h1 {
margin-top:100px;
font-size:55px;
margin-bottom: 10px;
}
#showcase p {
font-size: 20px;
}
/*-----------newsletter--------------*/
#newsletter {
padding:15px;
color:white;
background: #7f8fa6
}
#newsletter h1{
float:left;
}
#newsletter form {
float:right;
margin:15px;
}
#newsletter input[type="email"]{
padding:4px;
height:40px;
width: 250px;
}
.button_1{
height:40px;
background-color: #fbc531;
border:0;
padding-left: 20px;
padding-right: 20px;
color:#353637;
}
#boxes {
margin-top: 20px;
}
#boxes .box {
float:left;
text-align: center;
width:30%;
padding:10px;
}
footer {
padding:20px;
margin-top: 20px;
color:white;
background:7f8fa6;
text-align: center;
} <html lang="en">
<head>
<!-- Required meta tags -->
<meta name="description" content="Affordable Web Design For Small and Medium-sized Companies">
<meta name="author" content="Keith Segovia">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="normalize.css-master/normalize.css">
<link rel="stylesheet" href="css/mainfollow.css" type="text/css">
<title>Youtube Tutorial 1</title>
</head>
<body>
<header>
<div class="container">
<div id="branding">
<h1>
<i class="fa fa-rocket"></i> <span class="highlight">1-2-3</span> Web Design
</h1>
</div>
<nav>
<ul>
<li class="current"><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="services.html">Services</a></li>
</ul>
</nav>
</div>
</header>
<section id="showcase">
<div class="container">
<h1>Affordable Web Design For Small and Medium-sized Companies</h1>
<p>d stamp, an am rudely strut befor made to court an amber To this fair proportive to deep bounting upon of the souls of York; And now, insteadful merry merry mer bruised fore our bruised fright the capers nimbly instern al.</p>
</div>
</section>
<section id="newsletter">
<div class="container">
<h1>Get Our Newsletter</h1>
<form action="">
<input type="email" placeholder="Enter your email here">
<button type="submit" class="button_1">Subscribe
</button>
</form>
</div>
</section>
<section id="boxes">
<div class="container">
<div class="row">
<div class="col-lg-4">
<div class="box"><i class="fa fa-signal fa-5x"></i>
<h3>Grow Your Audience</h3>
<p>Really unusual yes out designed there let then create up. Articles shivers. Elsewhere worrying i'm much yeeucch furry teachers there. Non-native fears away relevant feel look. </p>
</div>
</div>
</div>
</div>
<div class="container">
<div class="box "><i class="fa fa-photo fa-5x"></i>
<h3>Modern Web Design</h3>
<p>Really unusual yes out designed there let then create up. Articles shivers. Elsewhere worrying i'm much yeeucch furry teachers there. Non-native fears away relevant feel look. </p>
</div>
</div>
<div class="container">
<div class="box"><i class="fa fa-cube fa-5x"></i>
<div class="row">
<div class="col-lg-4">
<h3>Ultra Fast Hosting</h3>
<p>Really unusual yes out designed there let then create up. Articles shivers. Elsewhere worrying i'm much yeeucch furry teachers there. Non-native fears away relevant feel look. </p>
</div>
</div>
</div>
</div>
</section>
<footer>
<p>1-2-3 Web Design Copyright amp;copy; 2019</p>
</footer>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X 965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH 8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM B07jRM" crossorigin="anonymous"></script>
</body>
</html> Комментарии:
1. Вы рекомендуете нам посмотреть руководство, чтобы понять проблему?
2. Я надеялся, что я допустил какую-то вопиющую ошибку, я бы не сказал, что это необходимо, нет необходимости
3. Я полагаю, что эта ссылка содержит очень полезную информацию, которую вы ищете. getbootstrap.com/docs/4.3/layout/grid
4. итак, я понял, что добавляю новую строку, когда в каждой строке была необходима только одна. Спасибо за вашу полезную ссылку, высоко ценится
5. Рад слышать, что это смогло вам помочь. Приветствия!
Ответ №1:
Для создания столбцов с использованием bootstrap
шаг 1 — создайте контейнер.
шаг 2 — создайте строку внутри контейнера.
шаг 3 — создайте столбцы (при использовании экрана grid system, разделенного на 12 столбцов).
итак, если вы хотите создать 3 равных столбца, тогда col-md-4 col-md-4 col-md-4 = 12 столбцов
если хотите создать 2 одинаковых столбца, тогда col-md-6 col-md-6 = 12 столбцов
если вы хотите создать столбец разного размера, создайте часть в соответствии с выбором (например, хотите создать 2 разных столбца, сделайте вот так col-md-4 col-md-8 = 12 столбцов), это подход, которого мы всегда придерживаемся при создании столбцов начальной загрузки, я надеюсь, вы поймете, что я хочу сказать.
<section id="boxes">
<div class="container">
<div class="row">
<div class="col-md-4">
hello
</div>
<div class="col-md-4">
hello
</div>
<div class="col-md-4">
hello
</div>
</div>
</div>
</section> Комментарии:
1. Теперь у меня возникла проблема с созданием столбцов, которые перемещаются по мере ввода большего количества текста. Есть идеи, почему это так?
2. не могли бы вы, пожалуйста, показать мне проблему, чтобы я мог легко разобраться в ней
3. Это просто переполнение текста в столбцах. Я хочу перенос слов, но не уверен, как я могу это сделать
4. style=»перенос слов: разрыв слова»
5. попробуйте этот и используйте overflow для скрытого