Question

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代码

#header{
  background-color:red;
}

JS代码：

$(document).ready(function() {
  $("body").addClass("container-fluid");

});

我想要的是屏幕上的“Shantanu Tomar”和3个按钮应该在div #header中排成一行。我正在使用Bootstrap3。我不确定如何提供col--代码，以便网页以正确的方式显示在手机，平板电脑，笔记本电脑上？我尝试使用lg和md类，但按钮没有排列文本“Shantanu Tomar”。

感谢您的帮助!!

Answer 1

如果您希望元素在一行中，并且不需要jquery，请使用col-xs-3 （因为您有四个元素）。

#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>

Answer 2

试试这样。并从W3schools https://www.w3schools.com/bootstrap/

学习引导程序

＆＃13;

<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>

＆＃13;

Answer 3

为什么不使用<ul>？

这样的事情：

<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>

个人投资组合页面 - 坚持使用Bootstrap网格布局

3 个答案: