问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

bootstrap如何调整到指定的布局大小

头像
tuihou123321
    49115112151

    bootstrap能不能实现下面指定宽度的布局效果
    左边820px,右侧350px,中间间距30px; 主体内容总宽度1200px;
    示意图：
    图片描述

    以下是我写的代码，请问如何调整，尽量贴代码出来，谢谢

    <html lang="zh-CN"><!--@(window)--><!--@(document)--><head>
  <title> bootstap布局调整</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

<link href="public/bootstrap.min.css" rel="stylesheet">
<script src="public/jquery.min.js"></script>
<script src="public/bootstrap.min.js"></script>
<!-- <link rel="stylesheet" href="css/demo4.css"> -->

</head>
<style>
    body{background:#ebebeb;color:#505050;}
/*以下代码使页面宽度达到1200px；*/
.container{padding:0;}
.col-lg-8{padding-left:0px;}
.col-lg-4{padding-right:0px;}

.col-lg-8,.col-lg-4{
  border:1px solid #999;
}

.left,.right{
  padding:50px;
  background: white;
}

</style>

<body>
<div class="container">
  <div class="row">
    <div class="col-lg-8">
      <div class="left">
      左侧部分:宽度820px

    </div>
    </div>
    <div class="col-lg-4">
        <div class="right">
      右侧部分:350px
    </div>

    </div>
  </div>
</div>
</body>
</html>
    bootstraphtmlcss
    阅读 20.9k
    4 个回答
    得票最新
    头像
    佣才
      1353
      ✓ 已被采纳

      很高兴你邀请我回答，但是我没用过bootstrap所以不怎么会。要是不用框架直接用css的话你也可以
      用媒体查询来写，大于720以上的宽度可以

      body{
    min-width:1200px;
    width:1200px;
    margin:0 auto;
}

      这样来写，如果小于720的就让大的div一样大来排列

      头像
      amsri
        1243

        响应手机端再添加 .col-xs-

        楼主代码中只有 .col-md- 是适应桌面显示器的

        如果你想实现示意图指定宽度的布局就不要使用Bootstrap的栅格系统，默认分为12列，每列固定占比1/12，以此自适应各种设备，而你想在某个设备上固定的宽度布局，何不直接在对应div上设置，根本无需应用.col-。

        bootstrap栅格参数

        头像
        getcww
          2561413

          你要将盒子先设置一下,因为如果你有边框的话，这1PX也会计算进去

          box-sizing:border-box;
          头像
          undefind_5
            1.5k1297133

            学过bootstrap，但是一直没有用过，看了一下你的图片，觉得楼主的问题应该是两点原因导致的：一，你没有定义在手机屏幕下的流式布局，正是一楼说的那样。二，当在手机屏幕上时，尽管你给左右元素设了一个30px的定值，同时两个元素的宽都是百分比。但是，这30px所占用的空间大小的比例是不一样的，也就是说，当在手机屏幕的宽度下(.col-xs-)，你要么得适当缩小间隔，要么就再缩小一点两个元素的宽度（建议适当缩小间隔）。
            没有使用过Bootstrap，只是结合自己的一点经验，希望能帮到你!

            撰写回答
            你尚未登录，登录后可以
            • 和开发者交流问题的细节
            • 关注并接收问题和回答的更新提醒
            • 参与内容的编辑和改进，让解决方法与时俱进
            推荐问题