Question

我正在尝试使用bootstrap创建一个按钮网格，但是，当我在桌面上更改屏幕尺寸时，布局跳转到新位置，我在其他问题中看到答案是将其更改为continer-fluid div中的行流体，但这并没有帮助。

我的CSS和HTML是

＆＃13;

.top-buffer
{ margin-top:10px;
 margin-bottom: 10px;
}

＆＃13;

<!-- Turn off zooming on Mobile page-->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">


</head>

<body>
    <nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
<p> This is the nav bar</p>
  </div>
</nav>

<div class="jumbotron">
    <div class="container-fluid">

         <div class="row-fluid top-buffer"></div> <!-- this row is added in for iPhone Spacing. -->
         <div class="row-fluid top-buffer"><!-- open the first row int he grid-->

             <div class="col-md-4 col-md-offset-4">               <div class="col-sm-4 col-xs-4" >

                    <form action="page2JobMainMenu.html">
                    <button  type="submit" class="btn btn-default center-block"> Job </button>

                    </form>

                </div>

              <div class=" col-sm-4 col-xs-4">

                <form action= "page3CreateQuote.html">
                <button type="button" class="btn btn-default center-block">
                Quote </button>
                </form>
              </div>

              <div class="col-sm-4 col-xs-4">

                <form action="page4FinanceMainMenu.html">
                <button type="button" class="btn btn-default center-block">
                Finance</button>
                </form>
              </div>
        </div><!--close off the cold md 4 div-->
        </div><!-- Close the first row-->

          </div><!-- Close the Fluid Container -->
  </div><!--Close the Jumbotron-->

＆＃13;

非常感谢任何帮助。感谢

Answer 1

您的代码基本上按原样运行。使用col-xs-4可确保即使是最小的分辨率，按钮仍将保留其3列布局。在此实例中没有必要使用col-md-4，并且.row-fluid因Bootstrap 2而未被使用。.center-block也是不必要的，因为.btn-block旨在将Bootstrap Buttons视为全角元素。

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  	<div class="row">
		<div class="col-xs-4">
			<form action="page2JobMainMenu.html"><button class="btn btn-default btn-block">Button</button></form>
		</div>
		
		<div class="col-xs-4">
			<form action="page3CreateQuote.html"><button class="btn btn-default btn-block">Button</button></form>
		</div>

		<div class="col-xs-4">
			<form action="page4FinanceMainMenu.html"><button class="btn btn-default btn-block">Button</button></form>
		</div>
	</div>
</div>

＆＃13;

注意：如果您可以避免在<button>中使用<form>，则可以使用Bootstrap的.btn-group组件来获得更多功能。

Bootstrap Grid在屏幕大小之间跳转

1 个答案: