Question

请帮助，因为我尝试使用媒体查询修复此问题，但没有一个有效。我试图摆脱水平过度滚动导致我的div向右移动几个像素？任何帮助表示赞赏。

＆＃13;

.bodywrapper {
	background-color: #ededed;

}

.questiondiv {


	
	height:600px;
	background-color: white;

	
}



.leftHeading {

	
	height:300px;
	background-color: white;
	

}


.rightHeading {

	
	height:300px;
	background-color: blue;
	

}

＆＃13;

<!DOCTYPE html>
<html>
<head>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<link rel="stylesheet" type="text/css" href="question.css">


</head>




<body class="bodywrapper">

<nav class="navbar navbar-default" id="thenavbar">

</nav>

<div class="row">

<div class="col-md-2">
    <div class="leftHeading">
    </div>
</div>



<div class="col-md-6">
    <div class="questiondiv">
        <textarea rows="13"> </textarea>
    </div>
</div>


<div class="col-md-2">
    <div class="rightHeading">
    </div>
</div>




</div>






<!-- text editor-->
<script src="tinymce/js/tinymce/tinymce.min.js"></script>
<script>tinymce.init({
    selector: "textarea",
    theme: "modern",
    plugins: [
        "advlist autolink lists link image charmap print preview hr anchor pagebreak",
        "searchreplace wordcount visualblocks visualchars code fullscreen",
        "insertdatetime media nonbreaking save table contextmenu directionality",
        "emoticons template paste textcolor colorpicker textpattern"
    ],
    toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
    toolbar2: "print preview media | forecolor backcolor emoticons | fontsizeselect",
    image_advtab: true,
    templates: [
        {title: 'Test template 1', content: 'Test 1'},
        {title: 'Test template 2', content: 'Test 2'}
    ]
});</script>




<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>

＆＃13;

Answer 1

Bootstrap 需要包含网站内容的包含元素。

您可以使用.container：

<div class="container">
  ...
</div>

或.container-fluid：

<div class="container-fluid">
  ...
</div>

...您的代码将如下所示：

<div class="container-fluid">
  <div class="row">
    <div class="col-md-2">
      <div class="leftHeading">
      </div>
    </div>

    <div class="col-md-6">
      <div class="questiondiv">
        <textarea rows="13"> </textarea>
      </div>
    </div>

    <div class="col-md-2">
      <div class="rightHeading">
      </div>
    </div>
  </div>
</div>

您可以在Codepen中看到输出。

http://getbootstrap.com/css/

Answer 2

给出隐藏的x-overflow属性，如下所示：

body {overflow-x：hidden;}

Bootstrap代码导致水平过度滚动？

2 个答案: