Bootstrapで思うようにレスポンシブされない【画像有り】

###前提・実現したいこと
スマホで表示させた場合に、２つのDIV要素を縦1列で表示させたいです。

###発生している問題・エラーメッセージ
縦に表示はされるのですが、下のDIVの幅が異常に狭いです。
上のDIVと同じように、画面両端まで埋まってほしいです。
![
###該当のソースコード
html

<body>
  <div class="container-fluid picture_list" style="margin-top:90px;">
    <div class="row">
      <div class='col-xs-6'>
        <div id="picture_area" style="text-align: center;">
          <img id="picture_data" src="../data/image.jpg">
        </div>
      </div>
      <div class='col-xs-6' id='row_comment'>
        <div class='comment_wrapper'><span>aaaa</span></div>
      </div>
    </div>
  </div>
</body>

css

.tag_link {
	color: #333333;
	text-decoration: underline;
	margin-right: 10px;
}
#picture_area {
    display: inline-block;
    position: relative;
    margin:20px 20px 20px 20px;
}
#picture_data {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
#row_comment {
	background-color: #ffffe0;
	overflow-y: scroll;
}
.comment_wrapper {
	margin-top: 20px;
	width: 100%;
}

###補足情報(言語/FW/ツール等のバージョンなど)
Bootstrap3です。

s8_chu

2017/12/23 15:11 編集

質問文のコードにBootstrap 3.3.7を適用しましたが、画面幅が小さくなった場合にも縦一列に表示されていません。問題が再現可能なコードを追記していただけませんか？

行動規範の内容に同意します

回答1件

ベストアンサー

的外れかもしれませんが、以下のような動作でしょうか？

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
6    <title>タイトル</title>
7    <style type="text/css">
8        .tag_link {
9            color: #333333;
10            text-decoration: underline;
11            margin-right: 10px;
12        }
13
14        #picture_area {
15            display: inline-block;
16            position: relative;
17            margin: 20px 20px 20px 20px;
18        }
19
20        #picture_data {
21            display: block;
22            margin-left: auto;
23            margin-right: auto;
24        }
25
26        #row_comment {
27            background-color: #ffffe0;
28            overflow-y: scroll;
29        }
30
31        .comment_wrapper {
32            margin-top: 20px;
33            width: 100%;
34        }
35
36        img {
37            max-width: 100%;
38        }
39    </style>
40<body>
41<div class="container-fluid picture_list " style="margin-top:90px;">
42    <div class="row">
43        <div class='col-xs-12 col-sm-6'>
44            <div id="picture_area col-xs-12" style="text-align: center;">
45                <img id="picture_data" src="https://placehold.jp/3d4070/ffffff/500x500.png?text=../data/image.jpg">
46            </div>
47        </div>
48        <div class='col-xs-12 col-sm-6' id='row_comment'>
49            <div class='comment_wrapper'><span>aaaa</span></div>
50        </div>
51    </div>
52</div>
53<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
54<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
55</body>
56</html>