#html #css #twitter-bootstrap
#HTML #css #twitter-bootstrap
Вопрос:
Jumbotron на моей странице имеет h1, p и изображение, которое действует как логотип. У h1 и p есть position: sticky , чего я не хочу, но когда я удаляю этот стиль, изображение смещается вниз и портит мою панель навигации.
Я пытался изменить position: styles для .jumbotron fluid, jumbowords, контейнера img, но ничто из этого не заставило img вернуться в обычное положение, не вызвав эффекта залипания h1 / p (jumbowords).
Я воспроизвел проблему в этой скрипке:https://jsfiddle.net/Kenneth1026/18ocv062/7 /
HTML
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="../css/bootstrap.min.css" rel="stylesheet">
<div class="jumbotron jumbotron-fluid">
<div class="jumbowords">
<h1 id="Title">Kamp;C Transmissions</h1>
<p>San Jose, CA</p>
</div>
<!--wrapping the img in a container allows us to float the container-->
<div class="img-container">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAmVBMVEX33x4AAABiWAv/5x/64h795B/LtxhPRwlVTAlgVgv/6B9XTglZUApbUgpdVAr54B6RgxLv2B13aw58bw64phbCrxfhyxvRvBns1R2xoBWhkROWhxLYwxrdyBuolxRqXwyFeBA0LwYqJgVyZw2ejxO2pBaVhhJHQAiIexAbGAMPDgFLRAk7NQfFshgmIwUPDQE2MQYgHQQvKgW4jjzKAAANsUlEQVR4nO1d2ZqiOBgFkigQICK7CtiNVdqLs73/w02CS4kEiIoa uNczXTZNqf fUlQlBEjRowYMWLEiBEjRvwZgOj8n4ThjY/yDBAE/U9GkUCEiBvHsUv/CL77sXoDRG6Sb1OoQBAHGy/XGfKdHyL0R5CEINxg254BBYUzHTuGdoBj63kWDp8jBOkO25o2jSFIdEerwLB1LwLD5oji3ZTRsjcAfepaHYZeRGC4bgeiBB/EZrtgiTkES47LwXpWFBdHVnZmZg0EKay5MkyKYGKf7M6Ce56KnmB7Q7RFghZnUlYSNkuQASeo xtlA7q0O1czmumVFN3B6SnYfBG0E89pYVdK WNoeor8S7tbdxHUjPXA1BTGFbvjq6hjY0zTN1z6I2dgMgTzDqnRbEZbJ/tV6LphsCk0TY8HZYhw3 o6HUv3klQBwISrrLAs9tvA6ZCESJQW12lYeB24ACEQ zuM7eMn8WogMqSFEnUzH40itHHhx4giTubYulDlgTCEcFL4kCh2k/jsRQgQrfYDT7erYtaHoKUQBjmmHgMlFpcfzn2F0kOrpY1rWqzLH/IhmOTYoHGNWiGPn17sISJI8YvrKrH8cS69CFG81qlgrAAiv26FBi4iBCGKF5bFdULOp QRn4D9wW1QZYN5jQPW9pQfCD9xg4VqOJBbhhDODkmaswYwuBahbfglvxlPPU8M5TZDGM PsmFKWlRF6OgLl/qXeIZb0hxnBt5Nog1odQ5sOIZRtdTFXggIcjct8qPQQ5mVFE3OamnMEajUEY4dMAfzYTfZ31H0C5n9DAqm5ye1M1Ap5vWdiwhYFe0FvubMZSYIggutxCvz80uEVICAQGWjd9T3huZKrKPokqA2Vdyv/8VeTAU40doVVJPcCNFkevGoRmFmJz6GnrDRy6ytxXYkGEmsozCtWJizQeehhLZiFtgtQG0aSEyQKEbFxKzgFO3xmmYBKJt2WCCTYCBzJASzapDD6TFh0zNEoOt1uFDpJXjlZSgcvyybDGsCaBpgdDbY2CdlJkjcmozykmceUhP0u2IEhU0/ W4WbUD8Lqg9d6kJLrt9qKFvoNTpNuLPWvCMQOjOuVV hR ep0hqgkThSlBfUB8T510maOB8Ivt8G214oU7/oD4mdTpM0NHne9n5KTDk6eiUBjcU1dtMl9KzsbVZSc PhsIdRxExzb/Qflr/wYGbY2Nd87JoEDsmXBHqK3RRahi2hc wLDsvdot9qJT0CJGbJCEK4ogQM4IfJwk6ixB9BQMIKCg5Qh0tQshdZTJ3nqAb8kRYEky /tyx5lnkMj5n0FojjIJsl1vbhcQEiZLHYFFzpNcED05Fz9fLTUax2Cx360LTdWzZjoMnEqfbBHo5UupN ahG8ORfHJvBcZxTIWIXUidrYKYvzcl1RjrdU4J d6ZW/jJmUidr6ANbgXmdkeo qFcafJTNm3ezaAFMdU0PlSsuekIJToQIsubNu0m0gRBa4tpmUM2r8cak5aAIQQN/SL6JiDJLc3ZmtbS314hmAN0NGfnrQTaf0Nn6D6w8tlMQQuKuZJtBXxK5BXjsy AovVRI1s6lIbKboIHldjEMh0wGu8mlRuIQEti1PTMIDaVAZcc r5QVekDLiVm3EbLS/93P3wlSduyNtXnBBy AAlp2Y08aOpVfQylQqZ3OIr7Irj3U1K pamgqv4ZSHIa7th99jQs1l8CO3ViNpWmK/BqqnIteHH05Gn0FSedurO3sh6ChFPCQyeDwHO/Z6nJD0/QMR1 6g9BQhTXXDusk8WkTwfE6vYyjz8KBCFA5t7j1 CQ0gxph1OJlDNtaDurQDzjkLfjUwNAnCLrNKuroeeIOiR9leCgorKMrtT9pxdS4oG7j3QrJ3bSvAx26aE5QulJDU0izEVLxmVIX8jyQY9lrZAdzjCBMm3q/mjZLolhBg2j9nnFiqO3KuL8EZTXcaIU2xtp8t/GHQxESdGRYTkGZjnJHMxWa02IIi78HwCA2Lzby9AmEnW0LrAUDskWY/MrmZ4bODrXqqMbqXc0f1ElmmpRe9ClwTP1o25SXrXSToSRrR6BL9ftAJG3RUVtfT CwgiE5Z6WlgArqduZNOupgbTGoXK2EiwD4qgppKEQNp34cjGeR5LNBDojiWPNldpKhswPc8waOrWuziYIG5D/PgKluOOfgh2NYPTJilONrZ5ekZJD0GNDF r2doUNLymFXP2Bsa4W38aO4nPC 0Hvx0UD0XIP2YyTuQcoCCA4ZHIlyLkQtBJ07D1ZAYB/0DUsX3pKE9JjowbPBpW0dAEcAiD2qQhPRZOt7QdX5TbjlMTQYP9lk8fzdu9 tp5QJjWlCPVDiCjhYPupK1yE3UkEDss4z/ZnyKcO1FAITDB2NGPunTAvdlEnxcpazRGd/yREQEn9xW5eFMV8/ZnsacL/RKtgZ 4sdnsFcidLQy8UE5zQLUOY7mbX6DgIRBCIlr/UKn5ai9R8kspAtmBilJesMMVZLW4q3 FErWHbtjQEzXRd/ysHlp/xU5rMzJfSdOb8BIisbvjbPIbTZobEXGkN/Ep4bv8cy55F9dqDW3TlNobI9dr4MSx7D8WIRvkHTkHexBAEXfwo/ul5Zk7YRR4PnJi/gSFNmQQIUux7Xf5j41/Du/ 3Js6QoFyMoKomfVJkGzR4f7/qCzMkwBAlqKqZeT j2gNSJbUeqCKEGZqFOEFV9XuTIhsd2psHTFuUIVjcQlBVVz151HLZ66GDnoIMYXobQVXt6RQ/ymx2SvuBbxBkaP6 laHWjymWKelDUyQxhii5laCqfvQRFiFrlT52uYoQQwL/vZ1hL3rK1tmcxy4bE2KI/DsIqj3cVUAU/PDVI0IMzW0jjR8/Gn7wc9 Dlpb3dj149YgIQxjzSeRBrAAQp8m0/jNP6cMM2UUXuv/YN4kwRBmP36/QhCzVIASZ6ZWQ/4vMPoIFcW1Nzx5MHkQYAl5CalwWgrCalPdVQVElfZigmAz/q3/m91VbxvzKeba9rZOhT 3xWx0EGBKFI8LJtZTMU28j6 9UA/R7WF8WYMjL2P6qZyygtEW712MpfTQpRRju6x/x6tZBQpXVFNJ1oUUYcnoXvHIGzPJeQkTPuFOG3IJNzh0IEYacj6wlPod5BRGGq86PyAwRhmH9I30VuC/AvfFw1l v6ckQyrx51eFKQrfJhVBeijkM1WEcthHMS/m9bt ULrrzIKSlDeOK/DnDtJ4hwpAQPkPqb1z5srRrCHUxQPPM0Itl11Uhhry87UtXV0BqnyPYL/2rhaL6y3/mmsKjEGT40caQYimvQYp29VuFyOCFknIUncxEXQxVVYukdDrC0zWRCfdWxvdDCU9IAaftW4eRSidH8Sm38l2EojqX7YYU8U0FGP8tRFHN5BLjDdsmMOZ0hnnYSiXGWzaGoKKLUVSTXsYW/eCmnShiCu4MqZ48Sc6Nm3tg8lOMIpZm0/xGhgoiTbuXV9jKcmPKrQwVAlIxa9xKoqg3M2TWOGmeel8gl6MddwfD8sU1IhwXUrSN72LIOEYCm4qpDHp6J0PG0f3sSnK2Mujp3QzZwilJOnJVGa5CfYAh42hOrDaG/0hgiQ8xVMrXQrctt3efaHk6HmXIOMbNScD8/UJ8nGHJsVGOfwZDlgSEDS2A96tpPwwZxyWX4ftfptQXQ0UxuT3V/O1q2h9DhVs8/v6DZEijIy/ v/3N5bcxbH9a7jb421cabmFIQPu5B 6m7QvficVvK/Dmu5h/7gmk0w6JAA7Dl72IloCIu03M0yyNxxC5LHNpP0UB/ql/2asCIlLmfKNHm/pDcVIteNqEbj2WBjiu5jUMISglteNNXDgHtmbXwqY1/bkZ3HLUkUCelr6AITkvmnOsnrfhfLV4SB3MxRz/R/P7Anle6xW FCnn1P96ObvhxFa1bkVKNZL/1UjR5NWKT4 H0PQverjra0dh8gqfS0WEZnLdq/jeMJYAvJM1z85pqIJVc/6rw53ctUP14qFAxHGPasAbSwDumLh4bl6KYC1VrIy oMKbJl0EfO5JC/bctcUEyE 81eyZMiRmwBky5DGAx/sXzBV3XHbhShG/JKJYh b5bqbyqxoa4c9MaYjb0CTyJvSRIEn9hqPLFxGMkKaDW6r6a8PexlPevTGZfWv40Len9hNR0z rqj//ax4h/bjUK9Rxx8C37bT1dOlzC DWXa1mVOO9KXwIn4snR0Ng3/NQVcshiuDAkItnr/Q3nRtsxXXbQWRXqBFPT2huPUTPUJumgK6dtmY8NVQcn 5mPeXolckpP4RgvaALxT1I0IYfvDRSeD/hCi9pYPDTsmbwa52GXmgHXnQXM Ic6WlGU30rdPXOFV72PuFbKDaPpVHanNzw8cITJ0h0Wav1VhnI2iDi P3SxS8IO6 vKtH 5kNiTkR/Uywveu1AhphR9 ak0/nCEggysfxm oZ3g0DIvTTgC/8GIlvaCH586 S3nbxlUZggJWt uKlvipkNoYWg1ybIv73V27ZLCUKrHc8hThfxLUdCIIDRJ38c m0WkfcuetNSPPaX2vbI8 fvaZFFys33ObKSHq0 PrXpWSu T70sck0ZbmSGrCqHSnmPslIW6Hc E1UJwFT7cCUzNO//pmeAHCHTN40YMWLEiBEjRowYMWLEiBEjRowYMWLEiBEjRowYMaIb/wOXkdWafTQZRQAAAABJRU5ErkJggg==">
</div>
</div>
<!--Navigation bar-->
<nav class="navbar navbar-inverse">
<ul class="nav nav-justified">
<li class="active"><a class="hvr-sweep-to-right hvr-wobble-top" href="index.html">Home</a></li>
<li><a class= "hvr-sweep-to-right hvr-wobble-top" href="aboutUs.html">About us</a></li>
<li><a class= "hvr-sweep-to-right hvr-wobble-top" href="Contact.html">Contact</a></li>
</ul>
</nav>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
CSS
.jumbotron-fluid
{
margin:0 auto;
position:static;
background-color:#f4f8ff;
height:20em;
color:#000666;
font-family: 'Barlow Condensed', sans-serif;
}
.jumbowords
{
position:fixed;
font-family: 'Barlow Condensed', sans-serif;
font-style:italic;
/*color:#000666;*/
margin:0 auto;
}
.navbar
{
text-align: center;
background-color:#000666;
/*border-bottom:5px solid #f4f8ff;*/
border-bottom: 5px solid #f2e319;
margin-left:0 auto;
margin-top:0;
position:static;
overflow:hidden;
}
li a
{
font-family: 'Barlow Condensed', sans-serif;
font-size:22px;
width:100%;
margin:0 auto;
padding-left:10px;
font-style:italic;
}
.navbar-inverse
{
border-radius:0;
box-shadow: 1px 2px 10px 1px rgba(0, 0, 0, 0.5);
}
.img-container {
float: right;
margin-top:-20px;
margin-right:20px;
position:static;
}
Комментарии:
1. Можете ли вы лучше объяснить, что вы хотите, чтобы все элементы выполняли при прокрутке?
2. Когда я прокручиваю вниз, я хочу, чтобы изображение и слова в jumbotron оставались там, где они есть; не прилипали к верхней части моего окна просмотра.
3. Все еще нужно больше ресурсов. h1 и p остаются там, где они изначально были отображены при прокрутке. Изображение — это единственное, что не остается там, где оно было изначально отображено. Вы хотите сказать, что изображение должно оставаться при прокрутке, как в настоящее время h1 и p?
4. Как вы можете видеть на этом изображении ( ibb.co/9q7nq8r ) Я прокрутил вниз до нижней части окна в jsfiddle. H1 и p следовали за мной, и я хочу, чтобы они оставались вверху, точно так же, как на изображении. Мы как-то на разных скриптах? На всякий случай, вот ссылка, по которой я сделал этот снимок экрана: jsfiddle.net/Kenneth1026/18ocv062/9
5. h1 и p не следуют за вами. Они не движутся! Они застряли наверху, а все остальное прокручивается мимо него.
Ответ №1:
Я изменил некоторое позиционирование, чтобы (я полагаю) дать вам то, что вы хотите.
Удалите фиксированное положение jumbowords, чтобы они прокручивались вместе со страницей.
Вместо того, чтобы перемещать ваше изображение, вы можете поместить его в родительское. -установите положение jumbotron в относительное, чтобы вы могли легко размещать его дочерние элементы.
.jumbotron-fluid { position: relative; }
-таким образом, вы можете размещать элементы внутри него с помощью «absolute» и использовать свойства top и right для позиционирования контейнера изображений.
.img-container {
position: absolute;
right: 0;
top: 0;
}
Скрипка:https://jsfiddle.net/wa2ynt4c /
Ответ №2:
Поместите src для изображения непосредственно в контейнер изображений и заголовок под ним в его собственном div. Я изменил image-container на image-responsive, но используйте любой из них по своему усмотрению.
<img class="img-responsive"src="http://yourreallylongurl" />
<div class="img-title">
<h1> Kamp;C Transmissions </h1>
<h3> San Jose, CA </h3>
</div>
Предполагается, что у вас есть css-заголовок изображения. Скорее всего, так и есть.
Я бы отказался от частей Jumbotron и использовал класс image-responsive или image-header для изображения, но я думаю, это по вашему усмотрению.