个人投资组合页面-卡在Bootstrap网格布局中
[英]Personal Portfolio Page - Stuck with Bootstrap Grid Layout
问题描述
https://codepen.io/shaan046/pen/vWmVNY 
https://codepen.io/shaan046/pen/vWmVNY
HTML code: HTML代码：
<body>
<div id="header" class="row">
<div class="col-md-1 col-lg-1"><h3 id="myText">Shantanu Tomar</h3</div>
<div class="col-md-offset-5 col-md-2 col-lg-offset-5 col-lg-2"><button class="btn btn-primary">Button1</button></div>
<div class="col-md-2 col-lg-2"><button class="btn">Button2</button></div>
<div class="col-md-2 col-lg-2"><button class="btn">Button3</button></div>
</div>
</body>
</html>
CSS Code CSS代码
#header{
background-color:red;
}
JS code: JS代码：
$(document).ready(function() {
$("body").addClass("container-fluid");
});
What I want is that the text “Shantanu Tomar” and 3 buttons on screen should come in div #header in a single row. 我想要的是文本“ Shantanu Tomar”和屏幕上的3个按钮应该放在div #header中。 I am using Bootstrap3. 我正在使用Bootstrap3。 Not sure how I can provide col-- tags so that the webpage is visible on Phone, tablet, Laptop in right manner? 不确定如何提供col--标签，以便以正确的方式在手机，平板电脑，笔记本电脑上显示网页？ I tried using lg and md classes but the buttons are not lining up with text “Shantanu Tomar”. 我尝试使用lg和md类，但按钮未与文本“ Shantanu Tomar”对齐。
Thanks for the help!! 谢谢您的帮助！！
3 个解决方案
解决方案1
0 2017-11-13 08:15:05
Just use col-xs-3 (since you have four elements) if you want the elements to be in a single row, and no need for jquery here. 如果您希望元素位于单行中，则只需使用col-xs-3 （因为您有四个元素） ，并且这里不需要jquery。
#header { background-color: red; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <div class="container-fluid"> <div id="header" class="row"> <div class="col-xs-3"> <h3 id="myText">Shantanu Tomar</h3> </div> <div class="col-xs-3"> <button class="btn btn-primary">Button1</button> </div> <div class="col-xs-3"> <button class="btn">Button2</button> </div> <div class="col-xs-3"> <button class="btn">Button3</button> </div> </div> </div>
解决方案2
0 已采纳 2017-11-13 08:19:20
Try like this. 尝试这样。 and learn bootstrap from W3schools https://www.w3schools.com/bootstrap/ 并从W3schools学习引导程序https://www.w3schools.com/bootstrap/
<html> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <body> <div id="header" class="row"> <div class="col-md-12 col-lg-12"> <div class="col-md-3 col-lg-3"> <h3 id="myText">Shantanu Tomar</h3></div> <div class=" col-md-2 col-lg-2"><button class="btn btn-primary">Button1</button></div> <div class="col-md-2 col-lg-2"><button class="btn">Button2</button></div> <div class="col-md-2 col-lg-2"><button class="btn">Button3</button></div> </div> </body> </html>
解决方案3
-2 2017-11-13 08:16:01
Why do not use a <ul> ? 为什么不使用<ul> ？
Something like this : 像这样的东西：
<div id="header" class="row"> <ul class="list-inline"> <li><button class="btn btn-primary">Button1</button></li> <li><button class="btn btn-primary">Button2</button></li> <li><button class="btn btn-primary">Button3</button></li> </ul> </div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.